centred drop down.

Hope someone can point me right here.

recently built a small horizontal drop down menu, all works fine but i just cant get it in the right place!!

When on the page i really want to get in in the centre.
I have tried putting a div tag around the html and align center but doesnt work, i also had a go at taking out the float:left in the css but it just goes to being a vertical menu. 😮

Ive done quite a bit of searching on this but havent really seen a definate solution that works..

this is probably something very simple which i just cant seem to get my head around so any help on this would be much appreciated..

thanks in advance for any replys ?

Heres the code in the body.

[CODE] <ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a>
<ul>
<li><a href=”#”>History</a></li>
<li><a href=”#”>Team</a></li>
<li><a href=”#”>Offices</a></li>
</ul>
</li>
<li><a href=”#”>Services</a>
<ul>
<li><a href=”#”>field1</a></li>
<li><a href=”#”>field2</a></li>
<li><a href=”#”>field3</a></li>
<li><a href=”#”>field4</a></li>
<li><a href=”#”>field5</a></li>
</ul>
</li>
<li><a href=”#”>Contact Us</a>
<ul>

<li><a href=”#”>field1</a></li>
<li><a href=”#”>field2</a></li>
<li><a href=”#”>field3</a></li>
<li><a href=”#”>field4</a></li>
</ul>
</li>
</ul>[/CODE]

and heres the css

[CODE]ul {
margin: 0;
padding: 0;
list-style: none;
}

ul li {
position: relative;
float:left;
width:149px;
}

li ul {
position: absolute;
left: 0;
top: auto;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
}

* html ul li a {height:1%}

li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
color: #fff;
background-color: red;
}

li:hover li a, li.over li a {
color: #777;
background-color: #fff;
}
li ul li a { padding: 2px 5px; }
li:hover ul, li.over ul { display: block; } [/CODE]

Also in #CSS _↴