Setting the <ul> width to place menu items using jQuery

Question

This is an extension of a question I posted a while ago: Setting the <ul> width to place menu items

Is there a jQuery code snippet that can adjust the width of each <ul>inside a certain <ul>one to make sure the elements are <li>not overflowing? 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 didn’t set it correctly <ul>, the layout looks messed up, as shown below:

Site menu http://img838.imageshack.us/img838/1288/menu.jpg

You can check out the site I'm developing here if you need more information about CSS or the overall structure of a web page.

Answer 1

, :

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

width, , , . , , position: realtive;, , <ul> a position: absolute, :

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

, , , , white-space :

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

: alt text http://img189.imageshack.us/img189/3817/menuye.jpg

Answer 2

, ( ):

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

Answer 3

If you remove the property line-height:

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

It displays a penalty or sets line-heightto a lower value, for example20px