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

Question

我正在构建一个基于 960 网格系统 ( www.960.gs ) 的网站，但遇到了问题。我想放下拉菜单但没有成功。我尝试了很多教程，但我变得更加困惑。有没有办法为这种网站创建菜单？顺便说一下，这是网站： 我的网站

谢谢你的帮助。

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）设置为位置：相对；并将#nav li ul 设置为 position:absolute; 它的位置使用 left:-9999px;

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

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

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

看到它在这里工作。