title: how to set longest li element's width as width of all li elements that belong to single parent ul
body: <p>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 <code>mouseover</code> on home, the width of all <code>&lt;li&gt;</code> elements coming under home should 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 <code>CSS</code> file I have written for the menu is like this</p>
  
  <pre><code>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 &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>