jQuery Forum

I have set up a menu containing 4 levels.
The first two levels show the menu name perfectly but the width of levels 3 and 4 are too narrow to contain the menu name.

I was wondering how I can ensure that the level 3 and level 4 menus can be styled to make them fit the contents.
My code is as follows:-
  $( "#menu" ).menu({
    select: function( event, ui ) {
      var link = ui.item.children( "a:first" );
      if ( link.attr( "target" ) || event.metaKey || event.shiftKey || event.ctrlKey ) {
        return;
      }
      location.href = link.attr( "href" );
    }
  });

HTML
<ul id="menu">
 <li><a href="http://www.just-another-thought.info/shop/tony-c-77.html">Tony</a>
  <ul>
  <li><a href="http://www.just-another-thought.info/shop/tony-l2anti-aging-antioxidant-vitamins-c-79.html">l2Anti Aging (Antioxidant Vitamins)</a>
   <ul>
   <li><a href="http://www.just-another-thought.info/shop/l2anti-aging-antioxidant-vitamins-l3anti-aging-antioxidant-vitamins-c-80.html">l3Anti Aging (Antioxidant Vitamins)</a>
    <ul>
    <li><a href="http://www.just-another-thought.info/shop/l3anti-aging-antioxidant-vitamins-l4anti-aging-antioxidant-vitamins-c-81.html">l4Anti Aging (Antioxidant Vitamins)</a></li>
    </ul>
</li>
   </ul>
</li>
  </ul>
</li>
 </ul>