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

【问题标题】：Dropdown menu css - I can't work out how to apply padding to the bottom of ul parent link without affecting children下拉菜单 css - 我无法弄清楚如何在不影响子级的情况下将填充应用于 ul 父级链接的底部
【发布时间】：2015-08-13 23:58:49
【问题描述】：

我最近在创建下拉菜单时遇到了一些问题。由于放了一个 display:block 规则在我的子页面样式的 css 中，这些问题中的大多数已得到修复，但是现在我面临一个新问题 - 我无法在主父导航链接的底部添加填充，即"work" "about" 等，不影响下拉菜单中的子链接，导致间距变化不规律 - 破坏布局。

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

【问题讨论】：

你能提供 HTML 而不是 php 吗？
对不起，我不完全确定要提供哪个 html - 我的网站是建立在 wordpress 上的，所以我正在设计的菜单和 nav、<ul> 和 <li> 标签都是在 wordpress 仪表板的菜单部分中配置。据我了解，当父菜单和子菜单在仪表板中添加/移动时，wordpress 本身会添加所有必要的 html。

标签： html css drop-down-menu navigation

【解决方案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 */

【讨论】：

【解决方案2】：

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

为此（使用 Chrome）：

右键单击元素并单击“检查元素”。

在“元素”选项卡下，导航到您要定位的特定事物。

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

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

此选项的优点在于，如果您正在处理列表项（就像您一样），它将在 CSS 路径中选择该特定项的索引，以便只有您想要的项受到影响。

【讨论】：

【解决方案3】：

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

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

这将缩小差距，并使菜单保持在相同的位置。

【讨论】：