title: Adjusting <ul>'s width to accommodate menu items using jQuery
body: <p>This is an expansion of a question I posted a while ago: <a href="https://stackoverflow.com/questions/3275997/fitting-a-uls-width-to-accommodate-the-menu-items">Fitting a &lt;ul&gt;&#39;s width to accommodate the menu items</a></p>
  
  <p>Is there a snippet of jQuery code that can adjust the width of every <code>&lt;ul&gt;</code> inside a certain <code>&lt;ul&gt;</code> to make sure the <code>&lt;li&gt;</code> items don't overflow? The menu looks something like this:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;
      &lt;a href="javascript:;"&gt;Menu 1&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="javascript:;"&gt;Item 1&lt;a&gt;&lt;/li&gt;
        &lt;li&gt;
          &lt;a href="javascript:;"&gt;Subitem 1&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="javascript:;"&gt;Subsubitem 1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>If I don't adjust the <code>&lt;ul&gt;</code> correctly, the layout looks messed up as shown here:</p>
  
  <p><a href="https://i.stack.imgur.com/zmwx8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zmwx8.jpg" alt="Site menu"></a>
  </p>
  
  <p>You can take a look at the site I'm developing <a href="https://web.archive.org/web/20101205014236/http://labs.pieterdedecker.be:80/vspwpg/?" rel="nofollow noreferrer">here</a> if you need more information about the CSS or the general structure of the web page.</p>