为了实现客户想要的东西,我有点疯狂。我可以告诉他们这是不可能的,但我喜欢一个很好的挑战;)
基本上,我正在尝试做一个下拉菜单,其中的下拉菜单 <ul>
, 或者:
ul.menu li ul
被一个div包围。的种类:
<ul class="menu">
<li>
<a href="#">Item</a>
<div class="submenu">
<ul>.....</ul>
</div>
</li>
</ul>
我希望该 div 具有宽度:100% 并填充页面的整个宽度,但将 UL 内部对齐到适当的
<li>
.问题是
<div class="submenu">
将与 relative
一样宽容器,无论是主<ul class="menu">
或 <div>
包装 <ul class="menu">
.网站本身的宽度为 1000 像素,宽度居中
margin:0 auto;
我希望我已经正确地解释了自己:S 这是我放在一起的模型的链接:Dropdown Menu Mock up
任何帮助高度赞赏。
谢谢,
亚历克斯
最佳答案
老问题,但希望答案会对某人有所帮助。大约一个月前,我不得不从事与此类似的工作。
这是我基本上所做的事情(注意:你必须做一些额外的工作才能在旧的 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>
您可以使用以下样式:
/* GENERAL */
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, 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 中进行类似的工作,或者想要更深的嵌套列表,请告诉我。
为了让您有一个良好的开端,这里有一些对我有帮助的有用链接:
Chris Coyier 在工作中真的涵盖了我们,哈哈。
关于css - 下拉菜单 - 使 <ul> 子菜单的宽度为 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6370759/