Fluid width menu using CSS

Question

I have a horizontal CSS menu. The problem is when the user creates more than 5 menu items the li tabs move onto a new line. I dont want this to happen.

How can I make it fluid width so if the user creates just 3 menu items then each tab increases in width so it fits full width?

HTML:

<div class="container">
 <div id="new-menu-lower">
  <ul class="menuul">
   <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>

  </ul>
 </div>
</div>

CSS:

div.container
{
    clear: both;
    margin: 10px auto 0;
    width:960px;
    border:1px solid red;
    height:700px;
}

div#new-menu-lower {
    border-radius: 3px 3px 3px 3px;
    border-top: 0 solid lightgrey;
    margin: 0 8px 10px;
}

#new-menu-lower ul {
    border: 1px solid white;
    display: block;
    height: 27px;
}

#new-menu-lower ul li:first-child {
    border-left: 0 solid lightgrey !important;
    border-radius: 7px 0 0 7px;
}

#new-menu-lower ul li {
    background-image: url("http://i45.tinypic.com/16if95z.png");
    background-repeat: repeat;
    border-right: 0 solid lightgrey !important;
    float: left;
    height: 27px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    width: 168px;
}

JSFIDDLE EXAMPLE: http://jsfiddle.net/rM9MW/

Answer 1

You can use bit of JQuery to achieve this, here is the jsfiddle

Also please find the code here :-

$(document).ready(function(){
   var liCount = $('li.menuli').length;
   var parentUlWidth = $('li.menuli').parent('ul').width(); 
   var liWidth =  Math.floor(parentUlWidth * (1/liCount)) - 10;
    $('#new-menu-lower ul li').css({
        'width':liWidth
    });    
});​

EDIT:

I have updated the fiddle please check the fiddle link now. i changed the script and bit of css.

CSS:

#new-menu-lower ul li {
    padding-left: 5px;
    padding-right: 5px;
}