Adjusting <ul>'s width to accommodate menu items using jQuery

Question

This is an expansion of a question I posted a while ago: http://stackoverflow.com/questions/3275997/fitting-a-uls-width-to-accommodate-the-menu-items

Is there a snippet of jQuery code that can adjust the width of every <ul> inside a certain <ul> to make sure the <li> items don't overflow? The menu looks something like this:

<ul id="menu">
  <li>
    <a href="javascript:;">Menu 1</a>
    <ul>
      <li><a href="javascript:;">Item 1<a></li>
      <li>
        <a href="javascript:;">Subitem 1</a>
        <ul>
          <li><a href="javascript:;">Subsubitem 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

If I don't adjust the <ul> correctly, the layout looks messed up as shown here:

You can take a look at the site I'm developing here if you need more information about the CSS or the general structure of the web page.

Answer 1

If you remove the line-height property from:

ul#menu > li > ul li {
  color:black;
  font-size:10pt;
   /*line-height:30px;*/
  text-align:left;
}

It displays fine or set the line-height to lesser value such as 20px

Answer 2

The width problem actually stems from the width set at the top level here:

ul#menu > li {
  display: block;
  float: left;
  background: url(img/menuitem.png) top left;
  width: 104px;                                 /* here's the issue */
  height: 36px;
  margin-right: 1px;
  text-align: center;
  position: relative;                           /* add this */
}

Since it has a width specified, and its child is in the normal flow, its child is obeying its width, rather than scaling by itself. What you can do is take the child out of the flow, by adding position: realtive; like I have in the above style, then give the child <ul> a position: absolute, like this:

ul#menu > li ul {
  position: absolute;
  top: 36px;              /* top <li> is 36px, go down that much */
}

Then finally, so the anchor text gets a full background, give it a white-space rule like this:

ul#menu > li > a, ul#menu > li > ul a {
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

Here's what the result looks like:

Answer 3

This is all you need to do (and the spacing should be consistent with your theme):

ul#menu > li > ul {
  position: absolute;
  top: 37px;
}