Question

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

现在我想要一个与该菜单风格相同的子菜单，但是在它下面直接显示该特定链接的子项。请注意，此菜单位于我的页面中心margin: 0 auto;，页面宽度为width: 978px;。你可以在.header-nav-menu中看到这个。对不起，如果我没有包含一些东西，我的CSS非常基本。如果您有任何问题或任何我会很乐意回答！谢谢！

顺便说一下，我宁愿不使用Javascript，但如果有必要，那就没问题了。

Answer 1

我不确定你是否希望子菜单显示在悬停状态，但通过添加这两个类使用直接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/

Answer 2

如果你的意思是你希望那个标题中的每个项目都能激发子项目（在垂直或水平方向下），那么就无法用CSS严格实现这一点。遗憾。

在这种情况下，直接Javascript将比在jQuery lib中抛出更复杂。像这样......

http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/index.php

CSS：如何在其下方创建一个带有子导航菜单的导航菜单？

2 个答案: