虽然这是一个老问题,但希望答案能对某些人有所帮助。我大约一个月前也需要处理类似的内容。
以下是我基本上所做的事情的演示(请注意:您必须进行一些额外的工作,以使其在旧版IE中正常工作):http://jsfiddle.net/doubleswirve/xbLrW/2/
我没有使用嵌套的div
,而是使用了嵌套的列表。使用以下基本标记:
<div class="nav">
<ul>
<li>
<a href="#">Products</a>
<ul>
<li><a href="#">Widget A</a></li>
<li><a href="#">Widget B</a></li>
<li><a href="#">Widget C</a></li>
</ul>
</li>
<li>
<a href="#">Locations</a>
<ul>
<li><a href="#">Location A</a></li>
<li><a href="#">Location B</a></li>
<li><a href="#">Location C</a></li>
</ul>
</li>
<li>
<a href="#">Staff</a>
<ul>
<li><a href="#">President</a></li>
<li><a href="#">VP</a></li>
<li><a href="#">Manager</a></li>
</ul>
</li>
</ul>
</div>
您可以使用以下样式:
body { overflow-x: hidden; }
.nav > ul > li {
display: inline-block;
position: relative;
padding: 3px 10px 3px 0;
z-index: 100;
}
.nav > ul > li > ul {
position: absolute;
left: 0;
top: 100%;
padding: 0 1000em;
margin: 0 -1000em;
z-index: 101;
visibility: hidden;
opacity: 0;
background: rgba(255, 240, 240, 0.8);
}
.nav > ul > li:hover > ul {
visibility: visible;
opacity: 1;
}
.nav > ul > li > ul > li {
padding: 3px 0;
}
如果您想在CSS方面变得更加时髦,您可以将以下内容添加到第二级
ul
中:
.nav > ul > li > ul {
...
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
如果有人对在旧版IE中使此工作方式感兴趣,或者想要更深层次的嵌套列表,请告诉我。
为了让你有一个良好的开端,这里有一些有用的链接帮助了我:
-
完整的浏览器宽度栏 (CSS技巧文章/评论)
-
修复z-index (对IE7有帮助)
Chris Coyier真的很厉害。
position: relative
?如果不需要,你可以在伪元素上设置固定高度和背景,这是一个演示。如果需要,也不是不可能,你可以将绝对定位的元素作为<body>
的子元素,使用z-index
设置堆叠等级等等。但这不是一个灵活的解决方案,因为你必须手动调整top
如果垂直间距发生变化。 - silvenon