CSS 3级下拉菜单 [英] CSS 3 Level Dropdown Menu

问题描述

所以我有一个3层CSS下拉菜单的问题。级别1和2工作正常，但三个没有正确显示，我想第三级向右分支。第三级是应该来自燃料链接的反物质和氘标签。

我有一个jsfiddle我的问题。对于那些谁不能得到它的工作我的代码如下。
http://jsfiddle.net/IanLueninghoener/fD9eF/

感谢大家！

这是我的html：

 code>< div id =nav> 
< ul> 
< li id =firstNavItem>< a href =index.html>首页< / li> 
< li>< a href =Warp.html> Warp< / a> 
< ul> 
< li>< a href =Warp-how-it-works.html>工作原理< / a>< / li> 
< li>< a href =Warp-Engine.html>变形引擎< / a>< / li> 
< li>< a href =WarpFactors.html>变形因子< / a>< / li> 
< li>< a href =>燃料< / a> 
< ul> 
< li>< a href =Anti-Matter.html>反物资< / a>< / li> 
< li>< a href =Deuterium.html>氘< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< li>< a href =Fact-or-Fiction.html>事实或小说< / li> 
< li>< a href =StarTrek.html>星际迷航< / a> 
< ul> 
< li>< a href =Enterprise.html>企业< / a>< / li> 
< li>< a href =Voyager.html> Voyager< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =about.html>关于< / a>< / li> 
< / ul> 
< / div> 
  

CSS：

 code> / * Reset * / 
 
 * {
 margin：0px; 
 padding：0px; 
} 
 
 .clearFix {
 clear：both; 
} 
 
 / *容器* / 
 
 #container {
 width：960px; 
 margin：50px auto; 
} 
 
 
 
 / * Red * / 
 
 / *导航第一级* / 
 
＃ 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; 
} 
 
 / *导航第二级* / 
 
 #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 * / 
 
 / *级别* / 
 
 #nav_red {
 font-family：HelveticaNeue-Light，Helvetica Neue Light，Helvetica Neue，Helvetica，Arial，Lucida Grande衬线
 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; 
} 
 
 / *导航第二级* / 
 
 #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 * / 
 
 / *导航第一级* / 
 
＃ 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; 
} 
 
 / *导航第二级* / 
 
 #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; 
} 
  

解决方案

3级下拉菜单。

首先，当您将鼠标悬停在第一级时，您只想显示第二级。因此，不应使用 #nav li：hover ul ，您应该具有 #nav li：hover> ul p>

其次，如果你想让你的第三级在父级的右边，你需要设置它的位置为relative，所以添加 position ：relative; 在您的课程 #nav li li

您必须添加一个新的样式：

  #nav li li ul {
位置：绝对; 
 top：0; 
 left：100％; 
} 
  

这里是你更新的jsfiddle有一个好看的3级下拉。

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;
}

解决方案

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.

这篇关于CSS 3级下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！