如何对齐下拉子菜单？

Question

我在这里制作了JSFiddle demo of a small dropdown menu¹，但我只是想不出如何点击下拉子菜单框。

<ul id="nav">
<li> <a href="#" class="main-menu">vcdsfds</a>
  <ul class="sub-menu">
    <li><a href="#">vcdsfds</a></li>
    ...
  </ul>
</li>
...
</ul>

描述我想要下拉列表的位置：

¹原始下拉资料来源：http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Answer 1

#nav li:hover ul { left: -50%; }小提琴：http://jsfiddle.net/abLyH/4/

Answer 2

#nav ul {
    position: absolute;
    left: -9999px;
    margin: 0 0 0 -50px;
}

您可以添加保证金......也许不是最佳解决方案，但它确实有效 示例：http://jsfiddle.net/abLyH/

Answer 3

如果我理解了您的问题，您必须将margin-left设置为子菜单。

.sub-menu {
    margin-left : -50%;
    border: 1px solid #CCC;
    text-align:center;}

Demo

Answer 4

检查一下 http://jsfiddle.net/abLyH/10/

我已将ul添加到容器<div>