I am having serious issues getting a CSS dropdown navigation menu to center. I have tried everything, but something is pushing it off. If I remove the “Padding=0” from the reset CSS, it moves to the center, but the space on the left and right are not equal. Any advice would be greatly appreciated.
Link to page: http://www.usavgroup.net/DEV/inv/menutest/menuwidthtest.html
CSS:
#menu{
border:none;
border:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
width:960px;
}
#menu ul{
background: url(../images/nav_background.jpg) #eef3f6;
height:35px;
list-style:none;
text-transform: uppercase;
}
#menu li{
float:left;
}
#menu li a{
color:#072c46;
display:block;
font-weight:normal;
line-height:35px;
padding:0px 30px;
text-align:center;
text-decoration:none;
}
#menu li a:hover, .menu ul li:hover a{
background:url(../images/nav_background_over.jpg);
color:#FFFFFF;
text-decoration:none;
}
#menu li ul{
background:#8bb8c6;
display:none;
height:auto;
padding:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#menu li:hover ul{
display:block;
}
#menu li li {
background:url(../images/sub_sep.gif) bottom left no-repeat;
display:block;
float:none;
width:225px;
}
#menu li:hover li a{
background:none;
}
#menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
text-align:left;
}
#menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url(../images/hover_sub.gif) center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
#menu p{
clear:left;
}
#menu li.spacer{
width: 3px;
}