需要 CSS 下拉菜单建议

Question

我正在尝试制作我的第一个纯 css/html 下拉菜单，但我很难让 Hover 功能正常工作。我收到了很好的答案，但这一次，一切都搞砸了，而且不在正确的位置。我现在很迷茫。

http://jsfiddle.net/X5Dbc/

    position: absolute; or somthing like that...

我有预感它与positioning 有关 上面的 jsfiddle 是我在询问“下拉”效果后得到的。

请记住，当谈到正确的 CSS 时，我还是个新手。任何使此菜单工作的建议或帮助将不胜感激！并且总是欢迎建设性的批评。

Answer 1

您的标记无效。 IDs 必须是唯一的。即你不能在多个元素上使用相同的ID。这就是class 的用途。无论如何都不需要使用IDs。

#navwrap ul li ul {
    display: none;
}
#navwrap ul li:hover ul {
    display: block;
    position: relative;
}

将:hover 移动到父li

您可以像这样分别设置两个ul 的样式：

顶层：

#navwrap > ul { your styles ... }

子级：

#navwrap ul ul { your styles ... }