Hello. I am attempting to make the main list buttons shorter than the drop down lists themselves.

The problem I have is setting #nav li ul to a width of 210px does not increase the available space for the menu items - so they overlap or take multiple lines.

Setting #nav li to 210px fixes the problems, but then the menu headings, or buttons, become too wide and the background image distorts.

Any help you can provide is appreciated..

Here is the code thus far:

/* Primary Navigation Buttons */

.menu_wrapper {
background: #ededed url(images/navigation/navend.jpg);
width: 750px;
height: 27px;
margin: 0px auto;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
color: black;
text-decoration: none;
font-weight: bold;
}

#nav li { /* all list items */
float: left;
width: 86px; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
margin-top: 0px;
margin-left: 6px;
background: #dedede;
width: 210px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul a:hover {
color:red;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#button {
height: 27px;
background: url(images/navigation/button1.jpg); /*86 pixels wide */
}

#span1 {
margin-left:17px;
line-height: 28px;
}

#span2 {
margin-left:10px;
line-height: 28px;
}

#span3 {
margin-left:23px;
line-height: 28px;
}

/* END OF NAVIGATION */

<div class="menu_wrapper">

<ul id="nav">

<li id="button"><a href="#"><span id="span1">fishes 1</span></a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>

</ul>
</li>

<li id="button"><a href="#"><span id="span2">fishes 2</span></a>

<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>

</ul>
</li>

<li id="button"><a href="#"><span id="span3">fishes 3</span></a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>

</ul>

</div>