Как правильно позиционировать подменю в главном меню (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: relative и ребенку ul к position: absolute для начинающих. Я сделал некоторые другие небольшие изменения в коде для достижения желаемого эффекта.

Вот CSS:

* { 
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; 
} 

Я также вымыл HTML немного. Вы отсутствовали закрывающий тег </ul>, а также:

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

Вот скрипка: http://jsfiddle.net/vXhZb/2/