CSS 드롭 다운 메뉴, 중첩 목록 - 하위 목록 항목 중첩 부모 목록 항목

Question

CSS 드롭 다운 메뉴를 만들려고하지만 picture에서 볼 수있는 것처럼 하위 목록 항목이 상위 목록 항목과 겹쳐서 표시되는 문제가 있습니다.

문제의 원인은 패딩입니다. 10px 5px; in line 12 - 제거하면 문제가 해결됩니다. 하지만 외견 상 패딩이 필요합니다. 나는 Inline elements and padding을 읽었는데 비슷한 문제는 있지만 심지어 기사에서 제공된 해결책 - 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; 
} 

Answer 1

, 나는 동작하는 예제가 있습니다

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

이 inline-block의 힘을 과소 평가하지 마십시오을! 기본적으로 'About (정보)'텍스트 주위에 빨간색 상자가 아니라 'About (정보)'텍스트와 충돌했습니다. 실제 a 태그는 빨간색 블록으로, 그 대신 inline-block으로 서식을 지정했으며 그 다음 정확히 그 아래의 ul과 충돌했습니다.

더 많은 설명이 필요하면 기꺼이 도와 드리겠습니다.