我有一个运行良好的三层 CSS 下拉菜单,但我目前正在为第二层和第三层列表项指定实际宽度。我一直在摆弄几个小时,试图让它看起来像我想要的那样,但没有成功。
我想要的是第二层中的项目的最小宽度等于其父项的宽度,如果项目的内容长于其父项的内容,则延伸超过该宽度。
我还希望第三层中的项目没有最小宽度,而是具有一个宽度,即该特定嵌套无序列表的最长列表项内容的宽度。
我当前的 HTML 和 CSS 在这里:http: //jsfiddle.net/kBVYD/1/
如果您只想查看代码,请查看 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;
}