javascript - CSS:如何在其正下方制作带有子导航菜单的导航菜单？

我现在有一个菜单，可以在这里找到... http://jsfiddle.net/EUaNY/

现在我想要一个子菜单，它的样式与那个子菜单相同，但直接显示在它的下方，其中包含该特定链接的子项。请注意，此菜单以 margin: 0 auto; 居中于我的页面，页面宽度为 width: 978px;。您可以在 .header-nav-menu 中看到它。抱歉，如果我没有包含一些我的 CSS 非常基础的东西。如果您有任何问题或任何问题，我很乐意回答!谢谢!

顺便说一句，我宁愿不使用 Javascript，但如果有必要那也没关系。

最佳答案

我不确定您是否希望子菜单出现在悬停时，但是通过添加这两个类使用直接 CSS 非常简单:

.header-nav-menu li > ul {
    display: none;
    position: absolute;
    width: 100%;
    padding: 4px 0;
    background: #3E0C0D;
}

.header-nav-menu li:hover > ul {
    display: block;
}

这是您更新的 jsFiddle http://jsfiddle.net/EUaNY/1/

关于javascript - CSS:如何在其正下方制作带有子导航菜单的导航菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10809553/