Centering CSS Menu

Sacr1fyce · September 3rd, 2008, 02:30 PM

Hello all,

I am new to these forums and web design in general. I am trying to center a CSS menu on a template that I am testing out. I've tried a few things to no avail. Any pointers or advice, it would be greatly appreciated. Thanks,

Steve

Here is the CSS code:

Quote:

/* Menu */

#menuholder{background: #38424E; width: 100%; height: 25px; border-top: 1px solid #fff; border-bottom: 1px solid #fff;}

#nav {
width: 100%;
background: #38424E;
float: left;

}

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

#nav a {
display: block;
padding:6px 10px 7px 10px;
color: #fff;
width: auto;
}

#nav a:hover {
background: #fff;
color:#38424E;
}

#nav li { /* all list items */
float: left;
display: block;

}

#nav li ul { /* second-level lists */
position: absolute;
background: #38424E;
width: 165px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
display: block;
}

#nav li ul a{ /* second-level lists */
width: 144px;
}

#nav li ul ul { /* third-and-above-level lists */
margin: -25px 0 0 155px;
padding: 0;
}

#nav li ul ul a{
width: 144px;
}

#nav li:hover, #nav li.hover {
position: static;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

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

Stormraven · September 3rd, 2008, 03:45 PM

Try this:

<div align="center">
[code here]
</div>

Aso · September 4th, 2008, 05:23 AM

The problem is your floated <li>'s - unless you give the entire menu (<ul>) a fixed width, and add margin:0 auto, you won't be able to centre it.

If you require a fluid menu with no fixed-width, you can use Stu Nicholls' technique with display:table to centre it.

Sacr1fyce · September 5th, 2008, 07:26 PM

Thanks for the replies! I will give the ideas a try.