html - 需要 CSS 下拉菜单建议

Question

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

    position: absolute; or somthing like that...

我有一种预感，它与positioning 上面的 jsfiddle 有关，这是我在询问“下拉”效果后所拥有的。

请记住，在正确的 CSS 方面，我仍然是新手。任何使此菜单工作的建议或帮助将不胜感激！建设性的批评总是受欢迎的。

score 4 · Accepted Answer

您的标记无效。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 ... }

1 回答 1