Hey there, I'm trying to center a dropdown menu in a 970px wide div. No matter what I do, I can't seem to get it to work correctly.
<div id="menuwrapper">
<ul class="menu" id="menu">
<li><a href="#" >Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Flights</a></li>
<li><a href="#">Car Hire</a></li>
<li><a href="#">Hotel Arrangements</a></li>
<li><a href="#">Ferries</a></li>
<li><a href="#">Other Services</a></li>
</ul>
</li>
<li><a href="#">About us</a></li>
<li><a href="#">Why us</a></li>
<li><a href="#">Frequently Asked Questions</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
Here's the CSS:
#menuwrapper {
height: auto;
width: 970px;
position: relative;
float: left;
padding: 0px;
margin: 0px;
clear: both;
}
ul.menu {
list-style:none;
margin:0;
padding:0;
font: 16px/20px 'TitilliumText22LLight', Arial, sans-serif;
text-shadow: #638517 1px 1px 1px;
color:#FFF;
}
ul.menu * {
margin:0;
padding:0
}
ul.menu a {
display:block;
color:#FFF;
text-decoration:none
}
ul.menu li {
position:relative;
float:left;
margin-right:0px;
border-right-style:none;
border-left-style:none;
height: 27px;
border-top-style: none;
border-bottom-style: none;
background-image: url(menuslit.gif);
background-repeat: repeat-y;
background-position: left top;
padding-top: 10px;
padding-right: 6px;
padding-bottom: 0px;
padding-left: 6px;
}
ul.menu ul {
position:absolute;
top:37px;
left:0;
background:#3f3f3f;
display:none;
opacity:0;
text-shadow: none;
list-style:none;
}
ul.menu ul li {
display:block;
background-color:#3f3f3f;
width: 200px;
background-image: url(over2.gif);
background-repeat: repeat;
padding: 5px 0px 5px 5px;
font: 14px/20px 'TitilliumText22LLight', Arial, sans-serif;
height: auto;
}
ul.menu ul li:hover {
background-image: url(over3small.gif);
background-repeat: repeat;
}
ul.menu ul ul {
left:205px;
top:-0px
}
ul.menu .menulink {
border:0px solid #aaa;
padding:10px 7px 0px;
font-weight:normal;
width:auto;
height:30px;
}
ul.menu li:hover {
background-image: url(over3.gif);
background-repeat: repeat;
border-left-width: 0px;
border-left-style: solid;
border-left-color: #b7b7b7;
text-shadow: none;
background-position: left top;
}
ul.menu .sub {
background:#d1d1d1 url(sdsimages/arrow.gif) 190px 8px no-repeat
}
ul.menu .topline {
border-top:0px solid #aaa
}