CSS UL, LI, Border, ..... ahhhh!

[HeavyEddie]

OK, I'm converting a page to a skin and I only have one outstanding issue as far as I can tell. This thing builds the menu using A, UL & LI elements. The problem is that in the original design it assumed 100% of the width for 4 items. Not going to work for the skin since the number of items is variable. Oh yeah, the only reason I need to be the full length is because this creates a large white border on the bottom that breaks the look if it isn't there.
369

So, I need to create some kind of element that matches the LI and will fill the remaining width width. CSS & HTML below.

Sorry for my lack of CSS knowledge folks.

HTML
<div id="menu" class="width">

<ul>
<li>
<a href="onecol.html" onfocus="blur()">
<span class="title ">One</span></a>
</li>
<li>
<a href="twocol_a.html" onfocus="blur()">
<span class="title ">Two</span></a>
</li>
<li>
<a href="twocol_b.html" onfocus="blur()">
<span class="title ">Three</span></a>
</a>
</li>
<li>
<a href="contact.html" onfocus="blur()">
<span class="title ">Four</span></a>
</a>
</li>
</ul>

</div>
CSS
#menu {
margin: 0 auto;
}

#menu ul {
width: 100%;
float: left;
margin: 0;
padding: 0;

text-align: left;
background: #3B5D77 url(../images/bg/menu.gif) repeat-x top left;
}

#menu ul li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}

#menu ul li a {
float: left;
/* width: 25%; */
height: 1.5em;

font: 400 1.2em arial, sans-serif;
letter-spacing: 0.1em;

color: #fff;

border-top: 7px solid #41637D;
border-bottom: 15px solid #FFF;
}

#menu ul li a span {
display: block;
padding: 2px 7px;
}


#menu ul li a span.desc {
font-size: 0.8em;
color: #8C8D94;
}


#menu ul li a:hover,
#menu ul li a.here {
background: #4A5C6A;
border-top: 7px solid #455660;
}

#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
color: #FFF;
}

[Tobias]

Eddie, how about inline CSS for the DIV:

<div id="menu" class="width" style="width:100%;background:#FFFFFF">

Haven't tried it myself, though.

[HeavyEddie]

For some reason, that throws a large white area on the bottom of the page. Does it need to be contained inside of a LI or UL?

[Tobias]

Eddie, I'm sorry that it doesn't work as intended; you just applied the "style" to your existing "<div ...>" tag, right?

[HeavyEddie]

I did... but no worries since I found another way to skin the cat. I was able to adjust the margin on a neibhoring element. Turns out much cleaner too.

Thanks for the help!