html - 下拉菜单 css - 我不知道如何在不影响 child 的情况下将填充应用到 ul 父链接的底部

Question

我最近在创建下拉菜单时遇到了一些问题。自从把一个 display:block rule in the css of my children page styling，这些问题中的大部分已经修复，但是现在我面临一个新问题 - 我无法在底部添加填充主要父导航链接，即“工作”“关于”等，不影响下拉菜单中的子链接，导致间距变化不规律 - 破坏布局。

我已经按照我想要的方式放置了所有内容，但我需要在主要链接的底部进行一些填充，以便它们“满足”下拉菜单并且不要在两者之间留下任何空白。否则，当我向下拖动光标时，当光标移过它们之间的间隙时，下拉菜单会消失。正如我提到的，这个问题在添加之前不存在 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 */