SOLDIER-OF-FORTUNE SOLDIER-OF-FORTUNE - 5 months ago 36
Javascript Question

Fluid width menu using CSS

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

You don't jeed javascript!

demo jsBin

Just change this lines in your CSS:

#new-menu-lower ul {

/*display: block; //////////////////REMOVE//////////////////// */
display:table; /*  //////////////////ADD//////////////////// */

and:

#new-menu-lower ul li {

/* float: left;      //////////////////REMOVE//////////////////// */
display:table-cell; /* //////////////////ADD//////////////////// */