Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

css drop down menu with image based rollovers

Need to set button width independently from drop down lists

3:58 pm on Oct 26, 2007 (gmt 0)

New User

10+ Year Member

joined:June 17, 2005
posts: 15
votes: 0

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 {

#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 {
line-height: 28px;

#span2 {
line-height: 28px;

#span3 {
line-height: 28px;


<div class="menu_wrapper">

<ul id="nav">

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


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

<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>


<li id="button"><a href="#"><span id="span3">fishes 3</span></a>
<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>



5:46 pm on Oct 27, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Jan 17, 2006
votes: 0

I think you need to add:

#nav li li {
float: none;

This is so that the second level doesn't float with the width of 86px and places more than one item on a single line.