我正在尝试创建纯粹简单的CSS下拉菜单,该菜单将在每个项目下方以全宽模式打开,但也会将每个下拉菜单保留在其父项目下方.
这个图像更好地解释了我想要实现的目标：
这个图像更好地解释了我想要实现的目标：
我只是无法弄清楚如何在每个li中保持嵌套的UL,但也有一个全宽度的背景包装它.
这是我在Codepan上准备的一个演示：
http://cdpn.io/wLjFm
解决方法
/* not very relevant styling */
h1 { font-size: 20px; padding-top: 20px; }
.container { position: relative; margin: 20px auto 0 auto; width: 75%; }
.header { background: #eee; }
.nav { background: #ccc; }
/* relevant styling */
body { overflow-x: hidden; } /* trick from css-tricks comments */
/* FIRST LEVEL */
.nav > ul > li {
display: inline-block;
position: relative;
padding: 3px 10px 3px 0;
z-index: 100;
}
/* SECOND LEVEL */
.nav > ul > li > ul {
position: absolute;
left: 0;
top: 100%;
padding: 0 1000em; /* trick from css-tricks comments */
margin: 0 -1000em; /* trick from css-tricks comments */
z-index: 101;
visibility: hidden;
opacity: 0;
background: rgba(255,240,0.8);
}
.nav > ul > li:hover > ul {
visibility: visible;
opacity: 1;
}
.nav > ul > li > ul > li {
padding: 3px 0;
}
.nav > ul > li:hover .drop {
font-weight: bold;
}
<div class="header">
<div class="container">
<h1>Hank's Big Leauge Widgets</h1>
<span>You want a widget? we got 'em!</span>
</div>
<!-- NAVIGATION -->
<div class="nav">
<ul class="container">
<li>
<a class="drop" 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 class="drop" 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 class="drop" 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>
</div>
<div class="content container">
<p>All sorts of content</p>
<p>All sorts of content</p>
<p>All sorts of content</p>
<p>All sorts of content</p>
<p>All sorts of content</p>
<p>All sorts of content</p>
</div>
**CSS and HTML**
演示
