什么是定位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; 
}