0

我有两级水平菜单，效果很好。第二级不是下拉菜单，它出现在第一级菜单项单击时，水平停留在第一级菜单下方。

我需要第一级和第二级菜单始终从容器的左侧开始并且是容器的全宽目前只有第一级这样工作，但第二级没有。它在活动的第一级菜单项下开始。

您可以在 JSFiddle 中看到它：http: //jsfiddle.net/GrBXa/1/

HTML

<div class="header">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-top-menu-container">
            <ul id="menu-top-menu" class="main_nav">
                <li><a>H1</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="">Prevent</a></li>
                        <li><a href="#">Avoid</a></li>
                        <li><a>P2</a></li>
                    </ul>
                </li>
                <li class="current-menu-item"><a href="#">Sol</a>    
                    <ul class="sub-menu">
                        <li><a>Jan</a></li>
                        <li><a href="">Janu2</a></li>
                        <li><a href="">Janu3</a></li>
                    </ul>
                </li>
                <li><a href="">Why </a>
                    <ul class="sub-menu">
                        <li><a href="">Electri</a></li>
                        <li><a href="">Envir</a></li>
                    </ul>
                </li>
                <li><a href="">Manag</a></li>
            </ul>
        </div>
    </nav>
</div>

CSS：

ol, ul {
    list-style: none;
}
.main-navigation {
    width: 100%;
    height: 38px;
    border-top: 1px solid #4a4a4a;
}
.main-navigation ul {
}
.main-navigation li, .main-navigation li a {
    text-decoration: none;
    color: black;
}
#menu-top-menu {
    height: 38px;
    line-height: 38px;
    display: inline-block;
}
#menu-top-menu>li>a {
    border-bottom: 0;
    white-space: nowrap;
    text-decoration: none;
}
#menu-top-menu>li>a, #menu-top-menu>li {
    display: inline-block;
    text-decoration: none;
}
#menu-top-menu>li >a {
    padding-left: 40px;
    padding-right: 40px;
}
#menu-top-menu>li:hover, .main-navigation ul>li>a:hover {
    background-color: #061361;
}
.sub-menu {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
    background-color: #061361;
    height: 26px;
    line-height: 26px;
}
.sub-menu li {
    display: inline;
}
.sub-menu li a {
    display: inline-block;
    padding-left: 14px;
    padding-right: 14px;
    color: white;
}
#menu-top-menu>li:first-child a {
    padding-left: 14px;
}
#menu-top-menu li.current-menu-item ul, #menu-top-menu li.current-menu-parent ul {
    display: inline;
}
#menu-top-menu li.current-menu-item a, #menu-top-menu li.current-menu-parent a {
    background-color: #061361;
    color: white;
}

我相信这可以使用一些相对定位来完成，但我无法做到这一点。我有定位问题。请给我一些指导。

4

2 回答 2

1

添加left:0; width:100%;到您的 .sub-menu 规则。

.sub-menu {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
    background-color: #061361;
    height: 26px;
    line-height: 26px;
    left:0;
    width:100%;
}

jsFiddle 示例

于 2013-07-16T16:28:06.240 回答
0

嗯，我有点不清楚你在寻找什么 - 但是，我会尽力帮助你。

我将以下样式添加到您现有的 CSS 定义中：

#menu-top-menu {
    position:relative;
}

.sub-menu {
    left:0;
    bottom:-26px;
    margin-left:40px;
    width:100%;
}

您会注意到我确实使用了position:relative，正如您所怀疑的那样。这是一个更新的 JSFiddle，展示了这些附加样式的效果。

如果这不是您想要的，请随时告诉我，我很乐意为您提供进一步的帮助。祝你好运！

于 2013-07-16T17:10:56.920 回答