CSS Menu will not center - need help - anyone?

[astone7035]

Posting all of the CSS Code below:

 

.jqueryslidemenu{

font: bold 12px Verdana;

background: #FFFFFF;

width: 100%;

}

 

.jqueryslidemenu ul{

margin: 0;

padding: 0;

list-style-type: none;

}

 

/*Top level list items*/

.jqueryslidemenu ul li{

position: relative;

display: inline-block;

float: none;

}

 

/*Top level menu link items style*/

.jqueryslidemenu ul li a{

display: block;

background: #999999; /*background of tabs (default state)*/

color: white;

padding: 8px 10px;

border-right: 1px solid #778;

color: #990000;

text-decoration: none;

}

 

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/

display: block;

}

 

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{

color: white;

}

 

.jqueryslidemenu ul li a:hover{

background: #990000; /*tab link background during hover state*/

color: white;

}

 

/*1st sub level menu*/

.jqueryslidemenu ul li ul{

position: absolute;

left:0;

display: block;

visibility: hidden;

}

 

/*Sub level menu list items (undo style from Top level List Items)*/

.jqueryslidemenu ul li ul li{

display: list-item;

float: none;

}

 

/*All subsequent sub menu levels vertical offset after 1st level sub menu */

.jqueryslidemenu ul li ul li ul{

top: 0;

}

 

/* Sub level menu links style */

.jqueryslidemenu ul li ul li a{

font: normal 13px Verdana;

width: 200px; /*width of sub menus*/

padding: 5px;

margin: 0;

border-top-width: 0;

border-bottom: 1px solid gray;

}

 

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/

background: #FFFFFF;

color: silver;

}

 

/* ######### CSS classes applied to down and right arrow images ######### */

 

.downarrowclass{

position: absolute;

top: 12px;

right: 7px;

}

 

.rightarrowclass{

position: absolute;

top: 6px;

right: 5px;

}

 

Any help in telling me why this will not center across the page would greatly help. Thanks.

[Wickham]

Here's a tutorial:-

http://www.rayswoodworks.com/test_files/Navbars/center-float-nav.html

In the source code the most important styles are:-

#header {

text-align:left;

width:800px;

margin:30px auto;

overflow:hidden; /*NOTE THIS*/

background:#708090;

padding:5px 0;

}

#nav {

float:left;

position:relative;

left:50%; /*NOTE THIS*/

}

#nav ul {

position:relative;

left:-50%; /*NOTE THIS*/

list-style:none;

margin:0;

padding:0;

}

 

http://www.search-this.com/2007/09/19/when-is-a-float-not-a-float/

Edited August 12, 2009 by Wickham