html - CSS 3 级下拉菜单

Question

所以我在使用 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;
}

Answer 1

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

首先，当悬停在第一层时，您只想显示第二层。因此，您应该使用 #nav li:hover > ul 而不是 #nav li:hover ul。

其次，如果你想让你的第 3 层位于其父级的右侧，你需要将其位置设置为相对，因此在你的类 中添加 position:relative; #nav 李李

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

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

Here您更新后的 jsfiddle 是否具有美观的 3 级下拉菜单。