jquery - 如何将最长li元素的宽度设置为属于单亲ul的所有li元素的宽度

我有这样的无序列表

<ul class="dropdown">Home
    <li>Kithchen</li>
    <li>Meeting room</li>
    <li>Garden</li>
</ul>

当我在首页上时，所有在首页下的mouseover元素的宽度应为最长元素的宽度。例如，这里的“会议室”最长。

我需要使用“ jQuery”来做到这一点

提前致谢

我为菜单编写的<li>文件是这样的

ul                          { list-style: none;}

/*
    LEVEL ONE
*/
ul.dropdown                 {text-align:left; position:relative;z-index:1; width:1000px;}
ul.dropdown li              { font-weight: bold;border:1px solid green; float:left;color:white;background: black;width:100% }
ul.dropdown a:hover         { color: white; }
ul.dropdown a:active        { color: white; }
ul.dropdown li a            { text-align:left; display:inline; padding:4px; color:white;}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li:hover        { background: orange; color: white; position:relative; }
*                           { margin: 0; padding: 0; }

/*
    LEVEL TWO
*/
.dropdown ul                { width: 220px; visibility:hidden; position:absolute;  left: 0; }
ul.dropdown ul li           { font-weight: normal; background:black; color: white; float:left; }

                            /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a         {color:White; border-right: none; width:180px; display: inline-block; }

/*
    LEVEL THREE
*/
ul.dropdown ul ul           { left: 100px; top: 0; }
ul.dropdown li:hover > ul   { visibility: visible;}

最佳答案

是否有您不想使用的原因

ul.dropdown li { display: block; width: 100%; }

??

编辑：

感谢jsfiddle链接，但您目前设置的演示无法正常运行。

我建议您使用众多免费的CSS下拉菜单生成器之一，至少作为基础，以了解它们的工作原理。我以前使用过并且可以推荐的一个是http://purecssmenu.com/。那应该可以让您正常进行。