CSS 3 级下拉菜单 [英] CSS 3 Level Dropdown Menu
本文介绍了CSS 3 级下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我在使用 3 层 css 下拉菜单时遇到了问题.第 1 级和第 2 级工作正常，但第 3 级显示不正确，我希望第 3 级向右分支.第三级是反物质和氘标签，应该来自燃料"链接.
我有一个 jsfiddle 来解决我的问题.对于那些无法让它工作的人，我的代码如下.http://jsfiddle.net/IanLueninghoener/fD9eF/
谢谢大家！
这是我的 html:
CSS:
/* 重置 */* {边距:0px；填充:0px;}.clearFix {清楚:两者；}/* 容器 */#容器 {宽度:960px；边距:50px 自动；}/* 红色的 *//* 导航一级 */#导航{font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;字体粗细:300；字体大小:15px；}#nav ul{背景:#000000；高度:35px；列表样式:无；边框:3px 实心 #000000；-webkit-border-radius: 6px;}#导航李{向左飘浮;填充:0px;}#nav li a{背景:#000000；显示:块；文字对齐:居中；文字装饰:无；颜色:#fff;行高:35px；填充:0px 25px;-webkit-border-radius: 6px;}#nav li a:悬停{文字装饰:无；背景:#4873b1；颜色:#FFFFFF；-webkit-border-radius: 3px;}/* 导航二级 */#nav li ul{位置:绝对；背景:#000000；显示:无；高度:自动；宽度:210px；-webkit-border-top-left-radius: 0px;-webkit-border-top-right-radius: 0px;左边距:-3px；}#nav li:hover ul{显示:块；}#nav li li:悬停{字体粗细:800；}#nav li li {显示:块；浮动:无；宽度:210px；}#nav li ul a{文本对齐:左；显示:块；高度:35px；填充:0px 10px 0px 25px;}/* 红色的 *//* 导航一级 */#nav_red{font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;字体粗细:300；字体大小:15px；}#nav_red ul{背景:#cfcfcf;高度:40px；列表样式:无；}#nav_red li{向左飘浮;填充:0px;}#nav_red li a{背景:#cfcfcf;显示:块；文字对齐:居中；文字装饰:无；颜色:#333；行高:40px；填充:0px 25px;}#nav_red li a:悬停{文字装饰:无；背景:#915fa6；颜色:#FFFFFF；}/* 导航二级 */#nav_red li ul{位置:绝对；背景:#000000；显示:无；高度:自动；宽度:210px；}#nav_red li:hover ul{显示:块；}#nav_red li li:hover {字体粗细:800；}#nav_red li li {显示:块；浮动:无；宽度:210px；}#nav_red li ul a{文本对齐:左；显示:块；高度:40px；填充:0px 10px 0px 25px;}/* 减肥 *//* 导航一级 */#nav_slim{font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;字体粗细:300；字体大小:14px；}#nav_slim ul{背景:#84b41f;高度:25px；列表样式:无；边框:3px 实心 #84b41f;-webkit-border-radius: 4px;}#nav_slim li{向左飘浮;填充:0px;}#nav_slim li a{背景:#84b41f;显示:块；文字对齐:居中；文字装饰:无；颜色:#333；行高:25px；填充:0px 25px;-webkit-border-radius: 4px;}#nav_slim li a:hover{文字装饰:无；背景:#315907；颜色:#FFFFFF；-webkit-border-radius: 2px;}/* 导航二级 */#nav_slim li ul{位置:绝对；背景:#84b41f;显示:无；高度:自动；宽度:210px；-webkit-border-top-left-radius: 0px;-webkit-border-top-right-radius: 0px;左边距:-3px；}#nav_slim li:hover ul{显示:块；}#nav_slim li li:hover {字体粗细:800；}#nav_slim li li {显示:块；浮动:无；宽度:210px；}#nav_slim li ul a{文本对齐:左；显示:块；高度:25px；填充:0px 10px 0px 25px;} 解决方案
三个步骤，您就有了 3 个级别的下拉列表.
首先，当悬停在第 1 层时，您只想显示第 2 层.因此，您应该拥有 #nav li:hover > ul，而不是 #nav li:hover ul.
其次，如果您希望能够将第 3 层置于其父级的右侧，则需要将其位置设置为相对，因此在您的类 中添加 position:relative;#nav li li
最后，要在其父级右侧显示第 3 级，您必须添加一个新样式:
#nav li li ul{位置:绝对；顶部:0；左: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屋！
查看全文
