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

【问题标题】：better way to do deal with parent ul width in dropdown menu在下拉菜单中处理父 ul 宽度的更好方法
【发布时间】：2023-04-09 18:21:02
【问题描述】：

我已经看到很多水平菜单，其中下拉菜单具有固定宽度，例如 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(border, padding)…

【问题讨论】：

标签： jquery css drop-down-menu

【解决方案1】：

如果你想在 li 的固定宽度内调整文本，那么你可以使用 css 属性 -

自动换行：断字；

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

我认为这会对你有所帮助

【讨论】：