Question

我最近在创建的下拉菜单中遇到了一些问题。放一个 display:block规则在我的子页面样式的CSS中，大多数这些问题已得到修复，但是现在我遇到了一个新问题 - 我无法在主要父导航链接的底部添加填充，即“工作”“约”等，而不影响下拉菜单中的子链接，导致间距不规则地改变 - 破坏布局。

我已经按照我想要的方式定位了所有内容，但是我需要在主链接的底部添加一些填充，以便它们“符合”下拉菜单并且不会在两者之间留下任何空白区域。否则，当我向下拖动光标时，当光标在它们之间的间隙之间移动时，下拉菜单会消失。正如我所提到的，这个问题在添加之前不存在 display:block，所以我知道 20px 父菜单链接下的padding-bottom将解决此问题。任何人都可以帮助我做到这一点，而不会产生上述问题吗？

我的网址：www.lucieaverill.co.uk

我的代码：

HTML：

<nav class="site-nav">
<?php $args = array('theme_location' => 'primary'); ?>
<?php wp_nav_menu(); ?>
</nav>

CSS：

/* header navigation menu */

.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding:0;
background-color:#ffffff;
list-style:none; 
}

.header nav ul li {
float:left;
margin-left:50px;
}

.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}

/*  dropdown menu */

.header nav ul ul { 
position:absolute; 
left: -999em; 
}

.header ul li:hover ul {
left:auto;
width: 180px;
height:auto;
}

.header ul li ul li {
margin-left:0px;
width:100%;
float:none;
}

.header ul li ul li a {
display: block;
background-color:#ffffff;
transition: .1s background-color;
margin:0px;
padding: 14px 0px 14px 10px;
font-size:11px;
}

.header ul li ul li:hover a {
background-color:#ededed; }

/* end dropdown menu */

/* end header navigation menu */

Answer 1

感谢您的回答，我尝试了一些方法，发现了一些有效的方法！这是更新后的CSS，我在导航链接的底部添加了填充，并在下拉ul容器的顶部添加了边距。

/* header navigation menu */

.header nav ul{
display:block;
float:right;
padding:0;
margin-top:15px;
list-style:none; 
}

.header nav ul li {
float:left;
padding: 0px 0px 15px 0px;
margin-left: 50px;
}

.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}

/*  dropdown menu */

.header nav ul ul { 
position:absolute; 
left: -999em; 
}

.header ul li:hover ul {
left:auto;
margin:15px 0px 0px 0px;
width: 180px;
height:auto;
}

.header ul li ul li {
padding:0px;
margin-left:0px;
width:100%;
}

.header ul li ul li a {
display: block;
background-color:#ffffff;
padding: 14px 0px 14px 10px;
transition: .2s background-color;
font-size:11px;
}

.header ul li ul li:hover a {
background-color:#ededed; }


/* end dropdown menu */

/* end header navigation menu */

Answer 2

您需要指向要添加填充的元素的特定CSS路径。

为此（使用Chrome）：

右键单击元素，然后单击“检查元素”。

在“元素”标签下，导航至您要定位的特定内容。

右键单击它并选择“复制CSS路径”。

粘贴到CSS中，并将其用作无法添加填充的元素的路径。

这个选项有什么好处，如果你正在处理列表项（就像你一样），它将选择CSS路径中该特定项的索引，以便只有你想要的项受到影响。

Answer 3

在您设置ul的{{1}}元素上，这也会影响子菜单margin-top: 15px;，从而产生间隙并打破显示子菜单的ul状态。有很多方法可以解决这个问题。我想到的第一件事就是将你的子菜单更改为填充而不是边距以缩小差距。

:hover

这样可以缩小差距，使菜单保持在同一位置。

下拉菜单css - 我无法解决如何在不影响孩子

3 个答案: