将子子菜单添加到带有子菜单的CSS菜单 [英] Add Sub-Sub-Menus to a CSS menu with Sub-Menus
本文介绍了将子子菜单添加到带有子菜单的CSS菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个CSS manu，我使用子菜单。我想知道我如何去添加一个子子菜单。例如，我将鼠标悬停在主菜单项上，子菜单弹出，然后将鼠标悬停在子菜单项上，并弹出另一个子菜单。这里是我现在使用的JS小提琴：
http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/
这里是我使用的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）右下角没有重复;
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; * /
}
菜单li：hover ul {
display：block;
}
.menu li li {
background：url（'../ images / sub_sep.gif'）左下角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 -重复;
border：0px;
color：#ffffff;
text-decoration：none;
}
.menu p {
clear：left;
}
这是我使用的HTML：
< div class =menu>
< ul>
< li>< a href =＃target =_ self>主要项目1< / a>< / li>
< li>< a href =＃target =_ self>主要项目2< / a>
< ul>
< li>< a href =＃target =_ self>测试子项目< / a>< / li>
< li>< a href =＃target =_ self>测试子项目< / a>< / li>
< li>< a href =＃target =_ self>测试子项< / a>< / li&
< li>< a href =＃target =_ self>测试子项目< / a>< / li>
< / ul>
< / li>
< li>< a href =＃target =_ self>主要项目3< / a>< / li>
< li>< a href =＃target =_ self>主要项目4< / a>
< ul>
< li>< a href =＃target =_ self>测试子项目< / a>< / li>
< li>< a href =＃target =_ self>测试子项目< / a>< / li>
< li>< a href =＃target =_ self>测试子项目< / a>< / li>
< / ul>
< / li>
< / ul>
< / div>
解决方案
这里是我如何处理你正在寻找： http://jsfiddle.net/Dg3yQ/26/
我在修改CSS时有些自由。修改的CSS将代码减少了几百个字符，我相信它实现了你的意图。我希望这有助于。
已修改：添加了一个简化的代码示例，并对这些子菜单的实现提供了注释。
#nav {list-style：none inside; margin：0; padding：0; text-align：center; } #nav li {display：block;位置：相对; float：left; background：＃006633; / * menu background color * /} #nav li a {display：block; padding：0; text-decoration：none; width：200px; / *这是菜单项的宽度* / line-height：35px; / *这是菜单项的高度* / color：#ffffff; / * list item font color * /} #nav li li a {font-size：80％;} / *子菜单项的字体更小* / #nav li：hover {background：＃003f20;} /当鼠标悬停在子菜单上时，悬浮列表项和父列表项* // * ---子列表样式--- * /＃nav ul {position：absolute; padding：0; left：0; display：none; / *隐藏子列表* /} #nav li：hover ul ul {display：none;} / *隐藏子子列表* /＃nav li：hover ul {display：block;} / *显示悬停时的子列表* /＃nav li li：hover ul {display：block; / *显示悬浮的子子列表* / margin-left：200px; / *这应该和父列表项相同的宽度* / margin-top：-35px; / *将子菜单的顶部与列表项的顶部对齐* /}
< ul id =nav> < li>< a href =＃>主要项目1< / a>< / li> < li>< a href =＃>主要项目2< / a> < ul> < li>< a href =＃>子项< / a>< / li> < li>< a href =＃>子项< / a>< / li> < li>< a href =＃> SUB SUB LIST& raquo;< / a> < ul> < li>< a href =＃>子子项目1< / a> < li>< a href =＃>子子项目2< / a> < / ul> < / li> < / ul> < / li> < li>< a href =＃>主要项目3< / a>< / li>< / ul>
/ div>
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:
http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/
Here is the CSS I am using:
.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:
<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>
解决方案
Here is how I would approach what you are looking for: 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.
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>
这篇关于将子子菜单添加到带有子菜单的CSS菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
