960网格系统中的CSS下拉菜单

Question

我正在建立一个基于960网格系统（www.960.gs）的网站， 我遇到了一个问题。 我想放下拉菜单，但没有成功。我尝试了很多教程 但我只是更加困惑。 有没有办法为这种网站创建菜单？ 这是网站的方式： My website

谢谢你的帮助。

Answer 1

通过仅使用CSS来实现此目的的最佳方法是对下拉列表的内容使用绝对定位，并在每个需要下拉列表的li中包含另一个无序列表。

所以标记看起来像这样：

<ul id="nav">
    <li><a>Nav Item with dropdown</a>
        <ul id="dropDown">
            <li><a>Dropdown Menu Item</a></li>
            <li><a>Dropdown Menu Item</a></li>
            <li><a>Dropdown Menu Item</a></li>
        </ul>
    </li>
</ul>

然后，您将#nav li（或#nav li a）设置为position：relative;并将#nav li ul设置为position：absolute;使用左边的屏幕一侧的位置：-9999px;

然后将您设置的元素的悬停设置为相对位置（li或li a），同时包含子ul：

#nav li:hover ul {
    position:absolute;
    left:0;
}

这样，在悬停时，子元素将在父菜单项下面成为焦点。

看到它正常工作here。