In this nested menu, the UL's list elements are floated left to create css based flyout menus. However, when the parent container (header) is not wide enough to fit them all on the same line, they get bumped down to the next row.

However, since this is a flyout menu, that screws up the vertical alignment of the elements.

How can I force the floated elements to not wrap to the next line (and optionally force the layout to expand horizontally when the width of menu.top.cat exceeds the header div's stated 977px?

This screenshot shows the correct display (when top row elements total width does not exceed container width of header element - 977px)


This shot shows what happens when more elements are added to the top row of list items. The last list item is wrapping under the first.

HTML Code:
<div class="header">
	<div class="menu top cat">
		<ul>	
			<li class="cat-item cat-item-35"><a href="">Line 1 el 1</a></li> 
			<li class="cat-item cat-item-13"><a href="">Line 1 el 2</a> 
				<ul class='children'> 
					<li class="cat-item cat-item-25"><a href="">Blue Cameras under $100</a> </li> 
					<li class="cat-item cat-item-26"><a href="">Red Cameras Under $100</a> </li> 
				</ul> 
			</li> 

			<li class="cat-item cat-item-14"><a href="">Line 1 el 3</a> 
			</li> 
			
			<li class="cat-item cat-item-27"><a href="">Line 1 el 4</a> 
			</li> 

			<li class="cat-item cat-item-12"><a href="">Line 1 el 5 (wraps to next line)</a> 
				<ul class='children'> 
					<li class="cat-item cat-item-30"><a href="">Slim Cameras Pocket Sized</a> 
					</li> 
					<li class="cat-item cat-item-31"><a href="">best black cameras under $200</a> 
					</li> 
				</ul> 
			</li> 
		</ul>
	</div>
</div>

<div class="main">stuff here below menus</div>
HTML Code:
.header {width:977px;}
.menu.top.cat {overflow:visible;}
.menu.top ul { position: relative; list-style: none; z-index: 50;}
.menu.top ul li { position: relative; float: left;}
.menu.top ul ul { position: absolute; visibility: hidden; list-style: none; z-index: 9999; }
.menu.top ul ul li {display:block;width:100%}
.menu.top ul ul ul {left:150px;}
.menu.top ul ul li { clear: both;}
.menu.top ul a { display: block; }
.menu.top ul ul ul { position: absolute; top: 0; }
.menu.top ul li:hover ul, .menu.top ul a:hover ul, .menu.top ul :hover ul :hover ul, .menu.top ul :hover ul :hover ul :hover ul { visibility: visible;}
.menu.top ul :hover ul ul, .menu.top ul :hover ul :hover ul ul { visibility: hidden; }
.menu.top ul a:hover {background:url(spot2.gif);background:url(bar-bg.png) repeat-x, url(spot2.gif) repeat;color:#333; text-decoration:none;}
.menu.top ul.children li.current-cat a {color:#333;}