메인 메뉴 (CSS) 아래에 하위 메뉴를 올바르게 배치하는 방법은 무엇입니까?

Question

(display : inline)을 사용하여 가로 메뉴를 만들 수 있었으며 지금은 sousMenu 덕분에 드롭 메뉴가 있습니다. 내 문제는 내가 맴돌던 요소에 관계없이 모든 하위 메뉴가 같은 위치에 나타나는 것입니다. 이 문제를 어떻게 해결할 수 있습니까? 지금까지

내 메뉴 코드 :

는

<ul>    
<li><a href="Index.html">Home</a></li> 
<li class="sousMenu">About Us 
    <ul> 
    <li><a href="#">Board of Directors</a></li> 
    </br> 
    <li><a href="#">Student Profiles</a></li> 
    </br> 
    <li><a href="#">Projects</a></li> 
    </ul> 
</li> 
<li class="sousMenu">Get Involved 
<ul> 
    <li><a href="#">Donations</a></li> 
</br> 
    <li><a href="#">Job Board</a></li> 
</br> 
    <li><a href="#">Join</a></li> 
</ul> 
</li> 
<li class="sousMenu">Resources 
<ul> 
    <li><a href="#">Connections</a></li> 
    </br> 
    <li><a href="#">Gallery</a></li> 
    </br> 
    <li><a href="#">Tours</a></li> 
</ul> 
</li>    

CSS :

#navcontainer ul { 
/*margin: 0;*/ 
margin-left: auto; 
margin-right: auto; 
padding: 0; 
top:180; 
right:20; 
width:800px; 
list-style-type: none; 
text-align: center; 
position: absolute; 
color: #fff; 
background-color: #003300; 
padding: .2em 1em; 
} 

#navcontainer ul li { 
display: inline; 
padding-left:2cm; 
} 

#navcontainer ul li a { 
text-decoration: none; 
color: #fff; 
background-color: #030; 
} 

#navcontainer ul li a:hover { 
color: #fff; 
background-color: #000; 
} 

.sousMenu:hover ul { 
display: block; 
} 

.sousMenu ul { 
text-align: center; 
display: none; 
list-style-type: none; 
}​ 

Answer 1

이 우선 position: absolute에 position: relative와 아이 ul에 부모 목록 항목을 설정하십시오. 원하는 효과를 얻기 위해 코드를 약간 수정했습니다. 나는 또한 HTML을 약간 정리

* { 
margin: 0; 
padding: 0; 
vertical-align: baseline; 
} 

li { 
list-style-type: none; 
} 
ul.main li { 
position: relative; 
display: inline-block; 
} 

.main li:hover > ul { 
display: block; 
} 

ul.sub { 
position: absolute; 
display: none; 
top: 100%; 
left: 0; 
} 

ul.sub li { 
display: block; 
} 

:

다음은 CSS입니다. 당신은뿐만 아니라 닫는 </ul> 태그가 없습니다했다 : http://jsfiddle.net/vXhZb/2/