Question

我希望制作一个水平下拉菜单，就像HowStuffWorks的主菜单一样：http://home.howstuffworks.com/community-living

注意子菜单如何覆盖水平主菜单栏的整个宽度，而不是在垂直列表中下拉。以及如何突出显示当前所选主菜单项和子菜单项。我希望这些功能，当悬停在其他主菜单项上时显示其他子菜单列表的额外好处，请查看以下示例：

基本上我想结合显示不同子菜单列表的效果，当你将鼠标悬停在链接上时，如下所示： http://jsfiddle.net/SKNYC/

并且还将当前所选菜单以不同颜色突出显示，如下所示： http://jsfiddle.net/pRT6S/

.full-width {
    width: 100%;
}

.normal-width {
    width: 1024px;
    margin: 0 auto 0 auto;
}
.main-menu > li {
    float:left;
    list-style-type:none;
    padding-right:30px;
}
.sub-menu {
    display:none;
}
.sub-menu li {
    float:left;
    padding-right:30px;
}

.sub-menu li:hover ul {
    float:left;
    padding-right:30px;
    background-color:green;
}

.main-menu li.active {
    background-color:blue;
}
.main-menu > li.active .sub-menu {
    display:block;
    position:absolute;
    left:0;
    right:0;
    background-color:blue;
}

请注意，我对CSS / HTML非常陌生，如何进行操作会很方便。：）

第一个jfiddle是从这段代码修改的： https://gist.github.com/jgoyon/3993263

第二个和第三个jfiddle来自这个帖子中的某个人的代码： CSS full-page-width horizontal menu and horizontal submenu

编辑：我发现的另一个与我的解决方案非常相似的代码就是这个： http://jsfiddle.net/U65eT/

但我不知道为什么当悬停在item1和item2上时不起作用？

编辑：目前的修订 http://jsfiddle.net/pRT6S/4/

几乎是正确的，只是在将鼠标悬停在item1上时没有显示子菜单的问题

Answer 1

这是怎么回事？检查我的评论。

http://jsfiddle.net/pRT6S/3/

主要问题是需要修改.main-menu，而不是.sub-menu，如下所示：

/*Not doing this right*/
.main-menu li:hover ul { /* This needs to be .main-menu, not .sub-menu! */
    display: block;
    /* float:left; */
    position: absolute;  /* better than float in this case */
    padding-right:30px;
    background-color:green;
    left: 0;             /* make sure everything hangs on the left */
}

更新：您可以使用您最初提供的代码（我错误地注释掉了），但稍微修改了一下我的添加绝对定位和z索引：

http://jsfiddle.net/pRT6S/5/

包含全宽CSS jsfiddle子菜单的水平菜单

1 个答案: