什麼是定位CSS懸停菜單的正確方法？

Question

我放了一個非常基本的懸停示例小提琴。

http://jsfiddle.net/qhj2P/

我很好奇，定位菜單的最好辦法是什麼。我該怎麼做才能讓第一個菜單正好落在第一個按鈕的下面，第二個菜單正好落在第二個按鈕的正下方？我不擅長CSS定位和類似的東西，所以任何幫助表示讚賞。

Answer 1

，最好的辦法是使用<ul>而非目前設置的。
http://jsfiddle.net/elclanrs/fHmvs/1/

<ul class="menu"> 
    <li> 
     <a href="#">One</a> 
     <ul> 
      <li><a href="#">One</a></li> 
      <li><a href="#">Two</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Two</a> 
     <ul> 
      <li><a href="#">One</a></li> 
      <li><a href="#">Two</a></li> 
     </ul> 
    </li> 
</ul> 

CSS：

.menu li { 
    float: left; 
    position: relative; 
} 
.menu ul { 
    position: absolute; 
    display: none; 
    background: red; 
} 
.menu ul li { clear: both; } 
.menu a { 
    display: block; 
    padding: .5em; 
    margin: .1em; 
} 

JQ：

$('.menu li').hover(function() { 
    $(this).children('ul').stop(1, 1).slideToggle(); 
}); 

Answer 2

使用樣式無序列表，而不是DIV。使用display:block將大部分樣式貼在A標籤上。

<div class="menu"> 
<ul> 
    <li><a href="...">Menu Item</a> 
     <ul> 
      <li><a href="...">Sub Item</a></li> 
      <li><a href="...">Sub Item</a></li> 
     </ul> 
    </li> 
    <li><a href="...">Menu Item</a></li> 
</ul> 
</div> 

CSS：

.menu ul, .menu li { 
    padding:0; 
    margin:0; 
    list-style-type:none 
} 

.menu li { 
    display:inline-block; 
    position:relative; 
} 

.menu a { 
    font-family:arial; 
    text-decoration:none; 
    display:block; 
    background-color:#c0c0c0; 
    padding:3px; 
    color:#000000 
} 

/* level two */ 

ul ul { 
    position:absolute; 
    display:none;  
} 

ul ul a { 
    background-color:#d0d0d0; 
    margin-top:3px; 
}