Cleanest way to self resize navigation menu with jQuery

Question

I have this menu, and I want the menu items automatically have the same size, depending on how many menu items there are and the nav width.

But I'm having a hard time making this work in a clean way as possible.

The Menu (JsFiddle)

This is how I build my menu

<ul>
   <li><a href="#">Item 1</a></li>
   <li><a href="#">Item 2</a>
     <ul>
       <li><a href="#">Item 1</a></li>
     </ul>
   </li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Item 4</a></li>
</ul>

Answer 1

You can use this if jQuery is an option:

$('nav ul > li').css('width',($('nav').width()/$('nav ul > li').size()) +'px');

Fiddle here: http://jsfiddle.net/jAptc/6/