how to set longest li element's width as width of all li elements that belong to single parent ul
<p>hi i have an unordered list like this</p>

<pre><code>&lt;ul class="dropdown"&gt;Home
&lt;li&gt;kithchen &lt;/li&gt;
&lt;li&gt;Meeting room&lt;/li&gt;
&lt;li&gt;garden&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>When I MouseOver on home, the width of all <code>&lt;li&gt;</code> elements coming under home shuld be the width of longest element. For example here 'meeting room' is longest.</p>

<p>I need to do this using jquery</p>

<p>Thanks in advance</p>

<p>the css file i have wriiten for the menu is like this
ul{ list-style: none;}</p>

<pre><code>/* 
    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 &amp; 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 &gt; ul           { visibility: visible;}
</code></pre>
