下拉菜单 - 制作 <ul>子菜单 100% 宽度 [英] Dropdown Menu - Make the <ul> submenu 100% width
问题描述
为了实现客户想要的东西，我有点疯狂.我可以告诉他们这是不可能的，但我喜欢一个很好的挑战 ;)
基本上，我正在尝试做一个下拉菜单，其中下拉
ul.menu li ul被 div 包围.种类:
我希望该 div 的宽度为:100% 并填充页面的整个宽度，但内部的 UL 与适当的 对齐.
问题是 <div class="submenu"> 将与 relative 容器一样宽，无论是主 <ulclass="menu"> 或
网站本身的宽度为 1000px，宽度居中 margin:0 auto;
我希望我已经正确地解释了自己 :S 这是我放在一起的一个模型的链接:下拉菜单模拟
非常感谢任何帮助.
谢谢，亚历克斯
老问题，但希望回答对某人有所帮助.大约一个月前，我不得不进行类似的工作.
这是我基本上所做的事情(注意:你必须做一些额外的工作才能在旧的 IE 中工作):http://jsfiddle.net/doubleswirve/xbLrW/2/
我没有使用嵌套的 div 而是坚持使用嵌套列表.使用如下基本标记:
您可以使用以下样式:
/* 一般 */身体{溢出-x:隐藏；}/* 来自 css-tricks 注释的技巧 *//* 第一级 */.nav >升 >李{显示:内联块；位置:相对；填充:3px 10px 3px 0;z-索引:100；}/* 第二级 */.nav >升 >立>ul{位置:绝对；左:0；顶部:100%；填充:0 1000em；/* 来自 css-tricks 注释的技巧 */保证金:0 -1000em；/* 来自 css-tricks 注释的技巧 */z-索引:101；可见性:隐藏；不透明度:0；背景:rgba(255, 240, 240, 0.8);}.nav >升 >李:悬停>ul{可见性:可见；不透明度:1；}.nav >升 >立>升 >李{填充:3px 0;}如果你想对 CSS 感兴趣，你可以将它添加到第二级 ul:
.nav >升 >立>ul{...-webkit-transition:所有 0.3 秒轻松；-moz-transition:所有 0.3 秒轻松；-o-transition:所有 0.3 秒轻松；过渡:全0.3s缓和；}如果有人有兴趣在旧的 IE 中以类似方式完成这项工作，或者想要更深的嵌套列表，请告诉我.
为了让您有一个良好的开端，这里有一些对我有帮助的有用链接:
Chris Coyier 真的会在工作中为我们提供帮助，哈哈.
I am going a bit crazy trying to achieve something my client wants. I could tell them it's not possible but I love a good challenge ;)
Basically, I'm trying to do a dropdown menu in which the dropdown <ul>, or:
ul.menu li ul
is surrounded by a div. Kind of:
<ul class="menu">
<li>
<a href="#">Item</a>
<div class="submenu">
<ul>.....</ul>
</div>
</li>
</ul>
I want that div to have width:100% and fill the whole width of the page but have the UL inside aligned to the appropriate <li>.
The problem is the <div class="submenu"> will be as wide as the relative container, be it the main <ul class="menu"> or a <div> wrapping the <ul class="menu">.
The website itself has 1000px width and is centered width margin:0 auto;
I hope I have explained myself properly :S Here is a link to a mock up I have put together: Dropdown Menu Mock up
Any help highly appreciated.
Thanks, Alex
Old question, but hopefully answer will help someone. I had to work on something similar to this a month or so ago.
Here is a fiddle of what I basically did (note: you have to do some extra work for this to work the same in older IEs): http://jsfiddle.net/doubleswirve/xbLrW/2/
I didn't use a nested div and instead stuck with nested lists. With a basic markup like the following:
<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>
You can use the following styling:
/* 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;
}
If you wanted to get snazzy with the CSS, you could add this to the second level 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;
}
If anyone is interested in making this work similarly in old IEs or wants deeper nested lists, let me know.
To give you a head start, here are some useful links that helped me:
Chris Coyier really covers us at work lol.
这篇关于下拉菜单 - 制作 <ul>子菜单 100% 宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
