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

我试图创建一个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>

---

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

永远不要低估

内联块的威力

！基本上，您的列表与文本“About”冲突，而不是与文本“About”周围的红色框冲突。我将实际的

a

标记格式化为红色块，即

内联块

，然后它与它下面的

ul

正确冲突

---

如果你需要更多的解释，我很乐意帮你

谢谢你的回答。与此同时，我还可以找到另一个解决方案。只需添加

margin:10px-5px在
ul#导航2 li ul
下，问题已解决。就这么简单！你觉得怎么样？我想说的是用胶带把它包起来，而不是拿出锤子和钉子，但是它完成了任务。
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;
}