I'm having difficulty centering this menu. I've experimented with adjusting margins, using the center tag, and inserting a div, but nothing seems to be working. Any assistance would be greatly appreciated. Thanks!
Feel free to view the JSFiddle here: http://jsfiddle.net/G8gE2/
CSS code:
ul#nave {
margin-left: auto;
margin-right: auto;
}
ul.drop a {
display: block;
color: #fff;
font-family: arial;
font-size: 18px;
text-decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid#fff;
background: #009933;
color: #fff;
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 599;
cursor: default;
background: #1e7c9a;
}
ul.drop ul{
visibility:hidden;
position: absolute;
top:100%;
left: 0;
z-index:598;
width:195px;
background:#009933;
border: 1px solid#fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible
}