Question

我正在尝试创建一个CSS下拉菜单，但问题是子列表项与父列表项重叠，正如您在picture中看到的那样。

我发现问题的根源是第12行的填充：10px 5px; - 删除后，问题就解决了。但我需要填充外观。我阅读Inline elements and padding解决了类似的问题，但即使是文章中提供的解决方案 - 使用 float：left; 而不是 display：inline; - 也无法解决我的问题。

为什么会发生这种情况，解决方案是什么？

HTML代码

<ul id="navigation_2">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
     <ul>
        <li>Who We Are</li>
        <li>Our Goal</li>
    </ul>
  </li>
</ul>

CSS代码

ul#navigation_2 
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}

Answer 1

在这里，我有一个有效的例子：

http://jsfiddle.net/hzCZY/2/

永远不要低估inline-block的力量！基本上你的列表与文本'About'相撞，而不是文本'About'周围的红框。我将实际的a标记格式化为红色块而不是inline-block，然后将其与其下方的ul正确冲突。

如果您需要更多解释，我会非常乐意提供帮助。

CSS下拉菜单，嵌套列表 - 子列表项重叠父列表项

1 个答案: