Make li to cover ul completely without fixed width of li

Question

I have a horizontal menu navigation.

The code is:

<div class="menu-holder">
    <ul class="menu"> 
        <li>
            <a href="#">Home</a> 
        </li>
        <li>
            <a href="#">Profile</a> 
        </li>
        <li>
            <a href="#">Billing</a> 
            <ul class="submenu"> 
                <li><a href="#">New</a></li> 
                <li><a href="#">Find</a></li>                         
            </ul>
        </li>
        <li>
            <a href="#">Workspaces</a> 
        </li>
        <li>
            <a href="#">Manage Leaves</a> 
        </li>
        <li>
            <a href="#">Blogs</a> 
        </li>
        <li>
            <a href="#">News</a> 
        </li>
        <li>
            <a href="#">Search</a> 
        </li>              
        <li>
            <a href="#">Albums</a> 
        </li> 
    </ul>         
</div>

The CSS:

ul.menu {
    list-style: none;
    padding: 0 20px;    
    margin: 0;
    float: left;
    width: 960px;
    background: #222;
    font-size: 1.2em;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 10px;    
    behavior: url(CSS3PIE);
}
ul.menu li {
    float: left;
    margin: 0;  
    padding: 0 15px 0 0;
    position: relative; 
}
ul.menu li a{
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.menu li a:hover{
    background: url(Images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span { 
    width: 17px;
    height: 35px;
    float: left;
    background: url(Images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {background-position: center bottom; cursor: pointer;} 
ul.menu li ul.submenu {
    list-style: none;
    position: absolute; 
    left: 0; top: 44px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    border-radius: 5px; 
    -webkit-border-radius: 5px;
    border: 1px solid #111;
    behavior: url(CSS3PIE);
}
ul.menu li ul.submenu li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; 
    border-bottom: 1px solid #444; 
    clear: both;
    width: 170px;
}
html ul.menu li ul.submenu li a {
    float: left;
    width: 145px;
    background: #333 url(Images/dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.menu li ul.submenu li a:hover { 
    background: #222 url(Images/dropdown_linkbg.gif) no-repeat 10px center; 
}

There is also jQuery has been used to create this navigation.

Now I want to make the li completely cover ui. But without applying fixed width to li. Because there is also another menu item(not in picture) which will be visible depending on the role of the logged in user.

Is it possible?

---

Answer 1

I believe the best way to solve this is to use display: table/table-cell instead of float: left. Here's a fiddle: http://jsfiddle.net/nk7yY/

Basically, what you'd change in your code is:

ul.menu {
    display: table;
    width: 100%; /* Tables are not 100% width like block elements */
    /* Everything you already had except float: left; which I don't really get why you have to begin with */
}

ul.menu li {
    display: table-cell;
    /* Everything you already had except float: left; */
}

ul.menu li a {
    /* Just remove the float here as well */
}

Edit: This won't work in old IE though, but you can keep the float for them (with a *float hack for example).

Answer 2

Are you saying you have 9 ul.menu li elements and there will some times be a 10th? and that you want all 9 (or 10) together to fill the width of the ul.menu?

or are you talking about the ul.submenu?

Just saying "make the li completely cover ui" also sounds like you want a single <li> to cover the entire width of the navigation ui (assuming its your <ul> and not some other parts of your UI.

Is this what your trying to do? or do you just want all 9 or 10 <li> items to fill the space of the <ul> ?

If so you should probably put a class on <ul class="menu"> which changes depending on the role of the logged in user so that you can adjust the styling accordingly.

Supply a bit more information on what your attempting to do and what browsers your wanting to support i.e. for CSS3.