Dynamic width of CSS background images
===

I have setup menu bar on my page using list and CSS to display the menu elements. To the right of the the menu button, in this case "Home", i have an empty bar element that i would like to extend to the width of the page before i close the menu bar width the end element. I have tried to set the width to 100% which causes it to break to the next line and fill the entire width of the page as displayed below. Any thoughts on how i keep everything on the same line and have the empty element be dynamic in width?   

The HTML:

    <div>
    <li class="menu-home">
    <a href="#">
    &nbsp;</a>
    </li>
    <li class="menu-bar">
    </li>
    <li class="menu-bar-right">
    </li>
    </div>

The CSS:


    li.menu-bar {
    	position: static;
    	float: left;
    	list-style-type: none;
    	background-image: url('top.png');
    	border-style: none;
    	border-width: 0px;
    	padding: 0px;
    	height: 34px;
    	width: 100%;
    }

The problem:

![enter image description here][1]


  [1]: http://i.stack.imgur.com/Crz3b.jpg