Question

所以我遇到了3层css下拉菜单的问题。级别1和级别2工作正常，但是三个没有正确显示，我希望级别3分支到右侧。第三级是Anti-Matter和Deuterium选项卡，应该来自“Fuel”链接。

我有一个问题的方法。对于那些无法让它工作的人，我的代码如下。 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;
}

Answer 1

三个步骤，你有3级下拉。

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

其次，如果您希望能够将第3级置于其父级右侧，则需要将其位置设置为相对级别，以便在班级position:relative;中添加#nav li li

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

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

Here是您更新的jsfiddle，具有良好的3级下拉列表。

CSS 3级下拉菜单

1 个答案: