0

我正在尝试制作一个 CSS 下拉菜单，但问题是子列表项与父列表项重叠，如图所示。

我发现问题的根源是填充：10px 5px; 在第 12 行 - 删除后，问题就解决了。但我需要填充的外观。我阅读了解决类似问题的内联元素和填充，但即使是文章中提供的解决方案 - 使用float: left; 而不是显示：内联；- 不能解决我的问题。

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

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;
}
4

1 回答 1

2

在这里，我有一个工作示例：

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

永远不要低估它的力量inline-block！基本上，您的列表与文本“关于”相冲突，而不是文本“关于”周围的红色框。我将实际a标签格式化为红色块，而不是 ，inline-block然后ul它与下面的正确碰撞。

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

于 2012-05-08T10:12:59.940 回答