我有一个 CSS 结构的菜单，它只能显示子页面。我还希望能够显示子子页面。
这是我已经拥有的：
#nav {
width:800px;
margin:30px 50px;;
padding: 0;
float:left;
}
#nav li {
list-style: none;
float: left;
padding:0 10px;
}
/*--temp--*/
#nav ul ul li {
clear:left;
}
#nav ul ul {
position:absolute;
left:14em;
top:0;
}
#nav ul ul li a {
display:block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
/*--end temp--*/
#nav li a {
display: block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
#nav a:hover {
color:#367FB3;
}
#nav a:active {
color:#367FB3;
}
#nav li ul {
display: none;
width: 14em; /* Width to help Opera out */
background-color:transparent;
z-index:666;
}
#nav li:hover ul, #nav li.hover ul {
display: block;
position: absolute;
margin:0px -10px;
padding:0px;
}
#nav li:hover li, #nav li.hover li {
float: none;
line-height:30px;
}
#nav li:hover li a, #nav li.hover li a {
background-color:#367FB3;
color:#fff;
font-size:13px;
font-family:"Lato" !important;
}
#nav li li a:hover {
background-color:#52baff;
color:#fff;
}
源代码html：
<!--begin header-->
<div id="header" >
<div id="logo">
</div>
<div id="top-menu">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="inner.html">Services</a>
<ul>
<li><a href="#">Bedrijfsprofiel</a>
<ul>
<li><a href="#">uhuh</a></li>
</ul>
<li><a href="#">Visie</a></li>
<li><a href="#">Werkwijze</a></li>
</ul>
</li>
<li><a href="#">Projecten</a></li>
<li><a href="#">Nieuws</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!--end header-->
您的意思是您希望隐藏“子子菜单”，并在鼠标悬停时显示，就像子菜单一样？
如果是这样，您可以添加以下 CSS：
#nav li:hover ul ul {
display:none; // hide the unordered list that is inside the unordered list
}
#nav li ul li:hover ul {
display:block; // display the unordered list in the same way as your sub menu
}
看看它的实际效果：http://jsfiddle.net/bozdoz/PGDKE/ http://jsfiddle.net/bozdoz/PGDKE/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
