Question

我有两级水平菜单，工作正常。第二级不是下拉菜单，它出现在第一级菜单项单击并在第一级菜单下水平停留。

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

你可以在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;
}

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

Answer 1

将left:0; width:100%;添加到.sub菜单规则中。

.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 example

Answer 2

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

我在现有的CSS定义中添加了以下样式：

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

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

你会注意到我确实使用了position:relative，因为你怀疑是这种情况。这是一个updated JSFiddle，展示了这些额外风格的成就。

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

造型二级菜单（二级）

2 个答案: