Html 将子子菜单添加到带有子菜单的 CSS 菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6537270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Sub-Sub-Menus to a CSS menu with Sub-Menus
提问by Jeff Thomas
I have a CSS manu that I am using with sub menus. I was wondering how I would go about adding a sub-submenu to it. For example, I hover over the main menu item and the submenu pops up, then I hover over the submenu item and another submenu pops up. Here is the JS Fiddle that I am using now:
我有一个用于子菜单的 CSS 手册。我想知道如何向它添加子子菜单。例如，我将鼠标悬停在主菜单项上并弹出子菜单，然后将鼠标悬停在子菜单项上并弹出另一个子菜单。这是我现在使用的 JS Fiddle：
http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/
http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/
Here is the CSS I am using:
这是我正在使用的 CSS：
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
}
.menu ul{
background:#006633;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#006633 url("../images/seperator.gif") bottom right no-repeat;
color:#ffffff;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #003f20 url("../images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#006633;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('../images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#003f20 url('../images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
Here is the HTML i am using:
这是我正在使用的 HTML：
<div class="menu">
<ul>
<li><a href="#" target="_self" >Main Item 1</a></li>
<li><a href="#" target="_self" >Main Item 2</a>
<ul>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
</ul>
</li>
<li><a href="#" target="_self" >Main Item 3</a></li>
<li><a href="#" target="_self" >Main Item 4</a>
<ul>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
</ul>
</li>
</ul>
</div>
回答by IMI
Here is how I would approach what you are looking for: http://jsfiddle.net/Dg3yQ/26/
以下是我将如何处理您正在寻找的内容：http: //jsfiddle.net/Dg3yQ/26/
I took some liberties on revising the CSS. The revised CSS reduced the code by a couple hundred characters and I believe it accomplishes what you intended. I hope this helps.
我对修改 CSS 采取了一些自由。修改后的 CSS 将代码减少了几百个字符，我相信它实现了您的意图。我希望这有帮助。
EDITED: Added a streamlined code example with comments to this answer on how these sub menus can be accomplished.
编辑：添加了一个简化的代码示例，并对此答案进行了注释，说明如何完成这些子菜单。
#nav {
list-style:none inside;
margin:0;
padding:0;
text-align:center;
}
#nav li {
display:block;
position:relative;
float:left;
background: #006633; /* menu background color */
}
#nav li a {
display:block;
padding:0;
text-decoration:none;
width:200px; /* this is the width of the menu items */
line-height:35px; /* this is the hieght of the menu items */
color:#ffffff; /* list item font color */
}
#nav li li a {font-size:80%;} /* smaller font size for sub menu items */
#nav li:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues */
/*--- Sublist Styles ---*/
#nav ul {
position:absolute;
padding:0;
left:0;
display:none; /* hides sublists */
}
#nav li:hover ul ul {display:none;} /* hides sub-sublists */
#nav li:hover ul {display:block;} /* shows sublist on hover */
#nav li li:hover ul {
display:block; /* shows sub-sublist on hover */
margin-left:200px; /* this should be the same width as the parent list item */
margin-top:-35px; /* aligns top of sub menu with top of list item */
}<ul id="nav">
<li><a href="#">Main Item 1</a></li>
<li><a href="#">Main Item 2</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">SUB SUB LIST »</a>
<ul>
<li><a href="#">Sub Sub Item 1</a>
<li><a href="#">Sub Sub Item 2</a>
</ul>
</li>
</ul>
</li>
<li><a href="#">Main Item 3</a></li>
</ul>回答by realtimeguy
If you want to use CSS transitions (which won't work on display property), you can replace display with opacity instead. To deal with the fact that elements now take up space even when hidden, you can simply put the whole menu into a separate div that is positioned absolutely and highest in z-order (which a menu ought to be anyway). Then nothing will be in the way as the menu will be the only item in the top layer.
如果你想使用 CSS 过渡（它不适用于 display 属性），你可以用 opacity 替换 display 。为了处理元素现在即使隐藏也会占用空间的事实，您可以简单地将整个菜单放入一个单独的 div 中，该 div 绝对定位并在 z 顺序中最高（无论如何菜单应该是这样）。然后没有任何障碍，因为菜单将是顶层中的唯一项目。
Here is the original example modified by me for CSS transitions:
这是我为 CSS 转换修改的原始示例：
#menu {
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
}
#nav {
height:35px;
list-style:none;
margin:0;
padding:0;
float:left;
text-align:center;
}
#nav li {
display:inline-block;
position:relative;
float:left;
background: #006633;
}
#nav li a {
display:inline-block;
width:200px;
line-height:35px;
padding:0;
text-decoration:none;
color:#ffffff;
}
#nav li li {float:left; #006633;}
#nav li li a {
display:block;
font-size:12px;
opacity:1;
transition: opacity 1s;
}
#nav li:hover {background:#003f20;}
/*--- Sublist Styles ---*/
#nav ul {
position:absolute;
padding:0px;
left:0;
/* display:none; */
opacity:0;
transition: opacity 1s;
}
/*--- Hide Sub Sublists ---*/
#nav li:hover ul ul {
/* display:none; */
opacity:0;
transition: opacity 1s;
}
/*--- Sublevel UL's display and position on hover ---*/
#nav li:hover ul {
/* display:block; */
opacity:1;
transition: opacity 1s;
}
/* had to make the position NOT based on hover, but permanent
for the transition to work , thus moved it from POS_001 */
#nav li li ul {
margin-left:200px;
margin-top:-35px;
}
#nav li li:hover ul {
/* POS_001 */
/* display:block; */
opacity:1;
transition: opacity 1s;
}<div id="menu">
<ul id="nav">
<li><a href="#" target="_self" >Main Item 1</a></li>
<li><a href="#" target="_self" >Main Item 2</a>
<ul>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >SUB SUB LIST 1 >></a>
<ul>
<li><a href="#" target="_self" >Sub Sub Test Item 1</a>
<li><a href="#" target="_self" >Sub Sub Test Item 2</a>
</ul>
</li>
<li><a href="#" target="_self" >SUB SUB LIST 2 >></a>
<ul>
<li><a href="#" target="_self" >Sub Sub Test Item 3</a>
<li><a href="#" target="_self" >Sub Sub Test Item 4</a>
</ul>
</li>
</ul>
</li>
<li><a href="#" target="_self" >Main Item 3</a></li>
</ul>
</div>