Question

我看过很多水平菜单，其中下拉列表有一个固定的宽度，如http://www.dubspot.com/它的工作但是......

我尝试制作逻辑大小，宽度像父级或更多。我的解决方案http://jsfiddle.net/m2ry3/但它有点令人毛骨悚然（重复将使用jQuery）：

<ul>
<li><a href="#">very long item like this</a>
<ul>
    <li><a href="#">small item 1</a></li>
    <li><a href="#">small item 2</a></li>
    <li><a href="#">small item 3</a></li>
    <!--duplicate and hidden -->
    <li class="hack"><a href="#">very long item like this</a></li>
</ul>
</li>
<li><a href="#">small</a>
<ul>
    <li><a href="#">a long item 1</a></li>
    <li><a href="#">a various item 2</a></li>
    <li><a href="#">small 3</a></li>
</ul>
</li>

ul li{
    float:left;
}
ul li a{
    display:block;
    padding:10px;
    text-decoration:none;
    border:1px solid #eee;

}
ul ul{
 position:absolute;       
 background:#ddd;
 display:block;   
}

.hack{
visibility:hidden;
height:0;    
}
ul li ul li {
    display:block;  
    clear:both;
    width:100%;
}

在jQuery中有悬停效果（我知道如何）。是否可以在没有js（jQuery）的情况下调整宽度？还是有CSS提示？

我尝试没有重复的li，处理li outerwidth（边框，填充）并不容易......

Answer 1

如果要在li的修复宽度内调整文本，则可以使用css属性 -

自动换行：break-word;

通过这个你可以调整固定宽度内的长文本。

我认为这会对你有所帮助

在下拉菜单中处理父ul宽度的更好方法

1 个答案: