Jquery 如何设置最长的li元素'；s宽度作为属于单亲ul的所有li元素的宽度

我有这样一份无序的清单

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

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

---

尽可能避免使用Javascript进行显示。我认为你可以使用严格的CSS来解决这个问题

---

如果您将

float:left

样式

，并使您的
s
显示：block
，则它们的宽度应相同。
尽可能避免使用Javascript进行显示。我认为你可以使用严格的CSS来解决这个问题

如果您将
浮动：左
样式
，并使您的
s
显示：块
，它们的宽度应该相同。
您不想使用的原因是什么

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

?

编辑：

感谢JSFIDLE链接，但是您设置的演示目前无法运行

我建议您使用许多免费的css下拉菜单生成器中的一个，至少作为基础，看看它们是如何工作的。我以前用过一个，可以推荐的是。这应该会让你正常工作。
你不想使用的原因是什么

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

var max = 0;
$("ul.dropdown li").each(function(){
  if($(this).width() >= max ){
     max  = $(this).width();
  }
});

$("ul.dropdown li").width(max);

?

编辑：

感谢JSFIDLE链接，但是您设置的演示目前无法运行

我建议您使用许多免费的css下拉菜单生成器中的一个，至少作为基础，看看它们是如何工作的。我以前用过一个，可以推荐的是。这会让你正常工作。
我自己也有问题，只需使用以下CSS：

var max = 0;
$("ul.dropdown li").each(function(){
  if($(this).width() >= max ){
     max  = $(this).width();
  }
});

$("ul.dropdown li").width(max);

ul{
  float: left;
}

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

我知道有点晚了，但这个答案让我发疯，我一直在寻找这个简单的片段。希望有人能帮上忙。
我自己也有这个问题，只需使用以下CSS：

ul{
  float: left;
}

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

我知道有点晚了，但这个答案让我发疯，我一直在寻找这个简单的片段。希望有人能帮上忙。
您不需要jQuery来完成这项工作。基本CS可以做到这一点，但我们首先需要更多<代码>
和
元素本质上是块级的，因此如果没有更多的上下文，我们将不会有很大帮助。您不需要jQuery来完成这项工作。基本CS可以做到这一点，但我们首先需要更多
和
元素本质上是块级的，因此如果没有更多的上下文，我们将不会有很大帮助。@bhargav--现在您已经添加了一些代码，我可以看到您的级别1
ul.dropdown li
具有
float:left
，这将导致它收缩。你为什么不在上面创建一个模型，然后我们可以为你修复它？@simon好的……我正试着把我的模型放到link@simon我已经编辑并签入了jsfiddle，但是如何获得该链接……我想这是@bhargav的链接——当您在jsfiddle中设置好它后，单击“保存”并发布url（在您的问题中）。然后我们可以用叉子叉你的小提琴，并给你返回一个解决方案的链接：）@simonn如果我能直接和你聊天，我希望我能说得更清楚点……问题是厨房等，孩子们也会在他们周围有黑色的背……但我不知道那里没有显示…@bhargav——现在你已经添加了一些代码，我可以看到您的1级
ul.dropdown li
具有
float:left
，这将导致它收缩。你为什么不在上面创建一个模型，然后我们可以为你修复它？@simon好的……我正试着把我的模型放到link@simon我已经编辑并签入了jsfiddle，但是如何获得该链接……我想这是@bhargav的链接——当您在jsfiddle中设置好它后，单击“保存”并发布url（在您的问题中）。然后我们可以用叉子叉你的小提琴，并给你返回一个解决方案的链接：）@simonn如果我能直接和你聊天，我希望我能说得更清楚。问题是厨房等等，孩子们也会在他们周围有黑色的背……但我不知道那里没有显示。。。