4

所以我在使用 3 层 CSS 下拉菜单时遇到了问题。第 1 级和第 2 级工作正常，但第 3 级没有正确显示，我希望第 3 级向右分支。第三级是反物质和氘选项卡，应该来自“燃料”链接。

我的问题有一个 jsfiddle。对于那些无法让它工作的人，我的代码如下。 http://jsfiddle.net/IanLueninghoener/fD9eF/

感谢大家！

这是我的html：

<div id="nav">
            <ul>
                <li id="firstNavItem"><a href="index.html">Home</li>
                <li><a href="Warp.html">Warp</a>
                    <ul>
                        <li><a href="Warp-how-it-works.html">How it works</a></li>
                        <li><a href="Warp-Engine.html">Warp Engine</a></li>
                        <li><a href="WarpFactors.html">Warp Factors</a></li>
                        <li><a href="">Fuel</a>
                            <ul>
                                <li><a href="Anti-Matter.html">Anti-Matter</a></li>
                                <li><a href="Deuterium.html">Deuterium</a></li>
                           </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="Fact-or-Fiction.html">Fact or Fiction</li>
                <li><a href="StarTrek.html">Star Trek</a>
                    <ul>
                        <li><a href="Enterprise.html">Enterprise</a></li>
                        <li><a href="Voyager.html">Voyager</a></li>
                    </ul>
                </li>
                <li><a href="about.html">About</a></li>
            </ul>
      </div>

CSS：

/* Reset */

* {
    margin:0px;
    padding:0px;
}

.clearFix {
    clear: both;
}

/* Container */

#container {
    width: 960px;
    margin: 50px auto;
}



/* Red */

/* Navigation First Level */

#nav{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size:15px;
}

#nav ul{
    background:#000000;
    height:35px;
    list-style:none;
    border: 3px solid #000000;
    -webkit-border-radius: 6px;
}

#nav li{
    float:left;
    padding:0px;
}

#nav li a{
    background:#000000;
    display:block;
    text-align:center;
    text-decoration:none;
    color:#fff;
    line-height:35px;
    padding:0px 25px;
    -webkit-border-radius: 6px;

}

#nav li a:hover{
    text-decoration:none;
    background: #4873b1;
    color:#FFFFFF;
    -webkit-border-radius: 3px;
}

/* Navigation Second Level */

#nav li ul{
    position:absolute;
    background:#000000; 
    display:none;
    height:auto;
    width:210px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    margin-left:-3px;
}

#nav li:hover ul{
    display:block;
}

#nav li li:hover {
    font-weight: 800;
}

#nav li li {
    display:block;
    float:none;
    width:210px;
}

#nav li ul a{
    text-align:left;
    display:block;
    height:35px;
    padding:0px 10px 0px 25px;
}






/* Red */

/* Navigation First Level */

#nav_red{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size:15px;
}

#nav_red ul{
    background:#cfcfcf;
    height:40px;
    list-style:none;
}

#nav_red li{
    float:left;
    padding:0px;
}

#nav_red li a{
    background:#cfcfcf;
    display:block;
    text-align:center;
    text-decoration:none;
    color:#333;
    line-height:40px;
    padding:0px 25px;

}

#nav_red li a:hover{
    text-decoration:none;
    background: #915fa6;
    color:#FFFFFF;
}

/* Navigation Second Level */

#nav_red li ul{
    position:absolute;
    background:#000000;
    display:none;
    height:auto;
    width:210px;
}

#nav_red li:hover ul{
    display:block;
}

#nav_red li li:hover {
    font-weight: 800;
}

#nav_red li li {
    display:block;
    float:none;
    width:210px;
}

#nav_red li ul a{
    text-align:left;
    display:block;
    height:40px;
    padding:0px 10px 0px 25px;
}



/* Slim */

/* Navigation First Level */

#nav_slim{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size:14px;
}

#nav_slim ul{
    background:#84b41f;
    height:25px;
    list-style:none;
    border: 3px solid #84b41f;
    -webkit-border-radius: 4px;
}

#nav_slim li{
    float:left;
    padding:0px;
}

#nav_slim li a{
    background:#84b41f;
    display:block;
    text-align:center;
    text-decoration:none;
    color:#333;
    line-height:25px;
    padding:0px 25px;
    -webkit-border-radius: 4px;

}

#nav_slim li a:hover{
    text-decoration:none;
    background: #315907;
    color:#FFFFFF;
    -webkit-border-radius: 2px;
}

/* Navigation Second Level */

#nav_slim li ul{
    position:absolute;
    background:#84b41f;
    display:none;
    height:auto;
    width:210px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    margin-left:-3px;
}

#nav_slim li:hover ul{
    display:block;
}

#nav_slim li li:hover {
    font-weight: 800;
}

#nav_slim li li {
    display:block;
    float:none;
    width:210px;
}

#nav_slim li ul a{
    text-align:left;
    display:block;
    height:25px;
    padding:0px 10px 0px 25px;
}
4

1 回答 1

8

三个步骤，您就有了 3 个级别的下拉菜单。

首先，当您悬停第 1 级时，您只想显示第 2 级。因此#nav li:hover ul，您应该拥有而不是拥有#nav li:hover > ul。

其次，如果您希望能够将第三级放在其父级的右侧，则需要将其位置设置为相对因此添加position:relative;您的类#nav li li

最后，要在其父级右侧显示第 3 层，您必须添加一个新样式：

#nav li li ul{
    position:absolute;
    top:0;
    left:100%;
}

这是您更新的 jsfiddle，具有漂亮的 3 级下拉菜单。

于 2013-09-18T18:50:38.150 回答