CSS下拉菜單，嵌套列表 - 兒童列表項目重疊父列表項目

我想做一個CSS下拉菜單，但問題是，子列表項目重疊父列表項，你可以看到在picture。CSS下拉菜單，嵌套列表 - 兒童列表項目重疊父列表項目

我發現問題的根源是padding：10px 5px;第12行的 - 刪除後，問題即告解決。但我需要填充的外觀。我讀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; 
}

來源

2012-05-08 Infinity