how to set longest li element's width as width of all li elements that belong to single parent ul

I have an unordered list like this

<ul class="dropdown">Home
    <li>Kithchen<开发者_如何学C/li>
    <li>Meeting room</li>
    <li>Garden</li>
</ul>

When I mouseover on home, the width of all <li> elements coming under home should be the width of longest element. For example here 'Meeting room' is longest.

I need to do this using 'jQuery'

Thanks in advance

The CSS file I have written for the menu is like this

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

is there a reason why you don't want to use

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

??

edit:

thanks for the jsfiddle link, but the demo you've set up doesn't work at the present time.

I suggest you use one of the many free css dropdown menu generators, at least as a base, to see how they work. One I've used before and can recommend is http://purecssmenu.com/ . That should get you going properly.

Avoid using Javascript for display where possible. I think you can solve this using strickly CSS.

If you put float: left style <ul>, and make your <li>s display: block, they should all be the same width.

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

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

I had the problem myself, simply use this CSS:

ul{
  float: left;
}

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

I know it's a bit late but this answer drives me nuts, i searched forever for this easy snippet. Hopfully someone will help this.