CSS下拉菜单 - 使孩子至少宽度的父母 [英] CSS drop down menu - Making children at least the width of parents
问题描述
我有一个三层CSS下拉菜单，工作正常，但我目前指定第二和第三层列表项目的实际宽度。我已经花了几个小时试图让它看起来我想要的方式，但没有成功。
I have a three-tier CSS drop down menu that is working fine, but I'm currently specifying an actual width for the second and third tier list items. I've been fiddling around for hours trying to get it to look the way I want but with no success.
我想要的是第二层的项目具有等于其父元素的宽度的最小宽度，并且如果项目的内容长于其父元素的内容，则该宽度延伸超过该宽度。
What I would like is for the items in the second tier to have a minimum width that is equal to the width of its parent, and extends past that width if the content of the item is longer than the content of its parent.
我还希望第三层中的项目没有最小宽度，而是宽度只是该特定嵌套无序列表的最长列表项的内容的宽度。
I would also like the items in the third tier to have no minimum width, but rather have a width that is just the width of the content of the longest list item for that particular nested unordered list.
我当前的HTML和CSS位于： http://jsfiddle.net/kBVYD/1/
My current HTML and CSS is here: http://jsfiddle.net/kBVYD/1/
如果您只想查看代码，请点击以下HTML：
If you'd prefer to just see the code, here's the HTML:
<div id="menu1">
<ul class="menu">
<li><a class="haschild" title="" href="">Home</a>
<ul class="sub-menu">
<li><a class="haschild" title="" href="">Sub Link 1</a>
<ul>
<li><a title="" href="">Sub Sub Link 1</a></li>
<li><a title="" href="">Sub Sub Link 2</a></li>
<li><a title="" href="">Sub Sub Link 3</a></li>
</ul>
</li>
<li><a title="" href="">Sub Link 2</a></li>
<li><a class="haschild" title="" href="">Sub Link 3</a>
<ul>
<li><a title="" href="">Sub Sub Link 1</a></li>
<li><a title="" href="">Sub Sub Link 2</a></li>
<li><a title="" href="">Sub Sub Link 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="haschild" title="" href="">About Us</a>
<ul class="sub-menu">
<li><a title="" href="">Sub Link 1</a></li>
<li><a title="" href="">Sub Link 2</a></li>
<li><a class="haschild" title="" href="">Sub Link 3</a>
<ul>
<li><a title="" href="">Sub Sub Link 1</a></li>
<li><a title="" href="">Sub Sub Link 2</a></li>
<li><a title="" href="">Sub Sub Link 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="haschild" title="" href="">Our Services Etc Etc Etc</a>
<ul class="sub-menu">
<li><a title="" href="">Sub Link 1</a></li>
<li><a class="haschild" title="" href="">Sub Link 2</a>
<ul>
<li><a title="" href="">Sub Sub Link 1</a></li>
<li><a title="" href="">Sub Sub Link 2</a></li>
<li><a title="" href="">Sub Sub Link 3</a></li>
</ul>
</li>
<li><a class="haschild" title="" href="">Sub Link 3</a>
<ul>
<li><a title="" href="">Sub Sub Link 1</a></li>
<li><a title="" href="">Sub Sub Link 2</a></li>
<li><a title="" href="">Sub Sub Link 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
这里是CSS：
#menu1 *
{
margin: 0;
padding: 0;
}
#menu1 ul.menu
{
float: left;
font-family: "Arial", sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
#menu1 ul.menu li
{
position: relative;
float: left;
list-style-type: none;
}
#menu1 ul.menu li a
{
position: relative;
display: block;
line-height: 21px;
font-size: 14px;
padding: 14px 21px;
text-decoration: none;
z-index: 100;
}
#menu1 ul.menu > li:first-child > a
{
border-left: 0;
}
#menu1 ul.menu > li:last-child > a
{
border-right: 0;
}
/** Sub Menu - Tier 2 **/
#menu1 ul.menu li ul.sub-menu
{
position: relative;
display: none;
margin: 0;
padding: 0;
}
#menu1 ul.menu li:hover ul.sub-menu
{
display: block;
float: left;
position: absolute;
z-index: 200;
}
#menu1 ul.menu li ul.sub-menu > li:first-child
{
margin: 5px 0 0 0;
}
#menu1 ul.menu li ul.sub-menu li a
{
width: 140px;
display: block;
}
#menu1 ul.menu li ul.sub-menu li:first-child > a
{
border-top: 0;
}
#menu1 ul.menu li ul.sub-menu li:last-child > a
{
border-bottom: 0;
}
/** Sub Menu - Tier 3 **/
#menu1 ul.menu li ul.sub-menu li ul
{
position: relative;
display: none;
left: 100%;
}
#menu1 ul.menu li ul.sub-menu li ul li
{
margin: 0 0 0 5px;
}
#menu1 ul.menu li ul.sub-menu li:hover ul
{
display: block;
float: left;
position: absolute;
top: 0;
}
#menu1 ul.menu li ul.sub-menu li ul li a
{
width: 140px;
display: block;
}
/** Colour Styles **/
#menu1 ul.menu li a
{
background: #09F;
color: #FFF;
}
#menu1 ul.menu > li > a
{
border-left: 1px solid #26A8FF;
border-right: 1px solid #0082D9;
}
#menu1 ul.menu li:hover > a, #menu1 ul.menu li a:hover
{
color: #09F;
background: #ddd;
}
#menu1 ul.menu li ul.sub-menu li a
{
border-top: 1px solid #26A8FF;
border-bottom: 1px solid #0082D9;
}
推荐答案
：
#menu1 ul.menu li ul.sub-menu li a {
width: 140px;
}
现在的问题是 ul.sub-菜单的尺寸基于相对父< li> 。这里的诀窍是使用 white-space：nowrap 来推出它的父级维度。然后使用 min-width 设置允许的最小宽度（或者至少表示父母的宽度）。
The problem now is that the ul.sub-menu's dimension are based on it's relative parent <li>. The trick here is to use white-space: nowrap to push it out of it's parent's dimensions. Then use min-width to set the minimum width allowed (or as you stated "at least the width of parents").
#menu1 ul.menu li ul.sub-menu {
min-width: 100%;
white-space: nowrap;
}
这篇关于CSS下拉菜单 - 使孩子至少宽度的父母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
