CSS 3 Level Dropdown Menu

问题:

so I've having problems with a 3-layer css dropdown menu. Levels 1 and 2 work just fine, but three is not showing up properly, I would like level three to branch to the right. Level three is the Anti-Matter and Deuterium tabs that should come from the "Fuel" link.

I have a jsfiddle with my problem. For those of you who cannot get it to work my code is below. http://jsfiddle.net/IanLueninghoener/fD9eF/

Thanks everyone!

Here's my 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;
}

回答1:

Three steps and you have your 3 levels dropdown.

First, when hovering your 1st level, you only want to show the 2nd one. So instead of having #nav li:hover ul, you should have #nav li:hover > ul.

Second, if you want to be able to have your 3rd level at right of its parent, you will need to set its position to relative so add position:relative; in your class #nav li li

Finally, to show you 3rd level at right of its parent, you will have to add a new style:

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

Here is your updated jsfiddle having a good looking 3 levels dropdown.