Floated sub UL keeping width of parent - width

Question

There are some similar problems here but none of the solutions fit my situation. I've got a nav that needs to be centered. There is a sub nav in a UL that needs to be left-aligned to its parent LI and laid out horizontally. When I float the sub nav LI's left, the UL keeps the width of its parent LI.
I'd set a fixed PX but the sub nav needs to be expandable so that the client can add or remove nav items and keep the layout.
Here is my HTML:
<nav>
<ul>
<li>Who We Are
<ul>
<li>Our Approach</li>
<li>What We Do</li>
<li>Leadership</li>
</ul>
</li>
<li>Our Results
<ul>
<li>Case Study A</li>
<li>Case Study B</li>
</ul>
</li>
<li>Our Experience
<ul>
<li>Category Experience</li>
</ul>
</li>
<li class="current">What We Think
<ul>
<li>Articles</li>
<li>Category Insight</li>
<li>Research</li>
<li>Training</li>
</ul>
</li>
<li>News
<ul>
<li>Press Releases</li>
<li>Articles</li>
</ul>
</li>
<li>Connect With Us
<ul>
<li>Join Us</li>
<li>Find Us</li>
</ul>
</li>
<li><div class="search"><input name="searchbox" type="text" id="searchbox" class="input_style" value="SEARCH" onFocus="if (this.value == 'SEARCH') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'SEARCH';}"><button></button></div></li>
</ul>
</nav>
Here is my CSS:
nav a,
nav a:visited {
color: #888888;
text-decoration: none;
display: inline-block;
line-height: 30px;
}
nav a:hover {
color: #CCC;
}
nav a:active {
color: #FFF;
}
nav {
text-align: center;
}
nav ul {
display: inline-block;
position: relative;
z-index: 597;
}
nav ul li {
float: left;
padding-left: 15px;
padding-right: 15px;
position: relative;
z-index: 599;
line-height: 30px;
}
nav ul li ul {
display: none;
}
nav li.current a {
background: url(../img/nav_arrow.png) no-repeat center bottom;
color: #FFF;
}
nav li.current ul {
display: block;
position: absolute;
z-index: 598;
top: 31px;
left: 1px;
width: auto;
}
nav li.current ul a {
background: url(none);
color: #888888;
}
nav li.current ul li {
float: left;
display: inline-block;
}
nav .search {
height: 18px;
width: 84px;
padding-left: 4px;
background: url(../img/search_bk.png) no-repeat;
margin-left: 20px;
margin-top: 5px;
float: left;
}
nav .search input {
height: 14px;
width: 68px;
float: left;
background-color: transparent !important;
border-style: none;
}
nav .search input.input_style {
font-family: "proxima-nova", sans-serif;
padding-top: 3px;
color: #777777;
}
nav .search button {
height: 11px;
width: 10px;
float: left;
background-image: url(../img/search_btn.png);
background-color: transparent;
border-style: none;
background-repeat: no-repeat;
margin-top: 3px;
}
Here is a screenshot:
My Screenshot
Thanks in advance!

Answer 1

Just make the width of the sub-menu UL something ridiculous like width:2000px instead of width:auto; this way the items can float horizontally in the sub-nav ul.
Commonly a website menu isn't going to exceed the width of the page area so why does it matter if the sub-menu UL has a excessively large width? It's only meant to house your li elements which will float above any content.
I use this: http://matthewjamestaylor.com/blog/centered-dropdown-menus
So my sub menu ul looks like;
#centeredmenu ul ul {
display: none;
float: left;
left: 0; // important to keep menu left aligned to parent li element>
position: absolute;
right: auto;
top: 2em;
width: 1000px; // set to whatever you want //
}
#centeredmenu ul ul li {
display: inline-block; // not really needed
left: 0; // important
}