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

我见过很多水平菜单，下拉菜单有固定的宽度，就像这样，这是工作，但

我试着做一个合理的大小，宽度像父级或更多。 我的解决方案，但有点令人毛骨悚然（重复使用jQuery）：

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

---

我尝试在没有重复li的情况下，处理li的外部宽度（边框、填充）并不容易。

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

单词包装：打断单词

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

我想这对你有帮助

<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%;
}