下拉菜单我无法弄清楚如何在不影响孩子的情况下将填充应用于 ul 父链接的底部

我最近在创建的下拉菜单中遇到了一些问题。自从放了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 */

谢谢你的回答，我尝试了一些东西，发现了一些工作!这是更新后的CSS，我在导航链接的底部添加了内边距，并在下拉容器的顶部添加了边距。

/* 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 */

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

这样做(使用Chrome):

右键单击该元素并单击"检查元素"。

在"元素"选项卡下，导航到您想要定位的特定内容。
右键单击，选择"复制CSS路径"。
粘贴到你的CSS中，并使用它作为你不能添加填充的元素的路径。

这个选项的好处是，如果你正在处理列表项，它会选择CSS路径中特定项的索引，这样只有你想要的项会受到影响。

在你的ul元素上，你设置了margin-top: 15px;，这也影响了子菜单ul，创建了一个间隙，打破了:hover状态显示你的子菜单。有很多方法可以解决这个问题。我想到的第一件事就是改变你的子菜单，用填充而不是边距来缩小空白。

.header nav ul ul { 
    position:absolute; 
    left: -999em; 
    margin-top: 0;
    padding-top: 15px;
}

这将关闭空格，使菜单保持在相同的位置

相关内容

最新更新

热门标签：