下拉菜单 - 使< ul>子菜单宽度100％ [英] Dropdown Menu - Make the <ul> submenu 100% width
问题描述
基本上，我试图做一个下拉菜单，其中下拉菜单< ul> 或：
ul.menu li ul
被div包围。种类：
< ul class =menu>
< li>
< a href =＃>项目< / a>
< div class =子菜单>
< ul> .....< / ul>
< / div>
< / li>
< / ul>
我希望该div具有宽度：100％并填充页面的整个宽度，但是UL内部与适当的< li> 对齐。
问题是 ; div class =submenu> 将与相对容器一样宽，无论是主要的 ul class =menu> 或< div> 包装< ul class =menu < / code>。
网站本身的宽度为1000px，居中宽度为$ code> margin：0 auto;
我希望我能够正确解释自己：S这是一个链接到我已经放在一起的模拟：下拉菜单Mock up
任何帮助高度赞赏。
谢谢，
Alex
旧问题，但希望答案将有所帮助有人。我不得不在一个月前就这样做过这样的事情。
这是一个我基本做的事情（注意：你必须做一些额外的工作这在旧版IE中工作相同）： http://jsfiddle.net/doubleswirve/xbLrW/2/
我没有使用嵌套的 div ，而是使用嵌套列表。使用以下基本标记：
< div class =nav>
< ul>
< li>
< a href =＃>产品< / a>
< ul>
< li>< a href =＃>小部件A< / a>< / li>
< li>< a href =＃>小部件B< / a>< / li>
< li>< a href =＃>小部件C< / a>< / li>
< / ul>
< / li>
< li>
< a href =＃>位置< / a>
< ul>
< li>< a href =＃>位置A< / a>< / li>
< li>< a href =＃>位置B< / a>< / li>
< li>< a href =＃>位置C< / a>< / li>
< / ul>
< / li>
< li>
< a href =＃> Staff< / a>
< ul>
< li>< a href =＃>总裁< / a>< / li>
< li>< a href =＃> VP< / a>< / li>
< li>< a href =＃> Manager< / a>< / li>
< / ul>
< / li>
< / ul>
< / div>
您可以使用以下样式：
/ * GENERAL * /
body {overflow-x：hidden; } / *来自css-tricks的评论* /
/ * 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;
顶部：100％;
padding：0 1000em; / *从css-tricks的评论* /
margin：0 -1000em; / *从css-tricks的评论* /
z-index：101;
可见度：隐藏;
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：所有0.3s缓解;
-o-transition：所有0.3s缓解;
过渡：全部0.3s缓解;
}
如果有兴趣在旧的IE中使这个工作类似，或者想要更深入的嵌套列表，让我知道。
为了给你一个开始，这里有一些有用的链接帮助我：
Chris Coyier真的在工作中覆盖了我们。 p>
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屋！
