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

Question

我见过很多水平菜单，其中下拉菜单具有固定宽度，例如http://www.dubspot.com/它可以工作，但是……</p>

我尝试制作一个合乎逻辑的大小，宽度像父级或更多。我的解决方案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(border, padding)……</p>

Answer 1

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

word-wrap：断词；

这样，您可以在固定宽度内调整长文本。

我想这会对你有所帮助