CSS Centering Child Regardless of Padding/Margin - css

Question

Basically, I have this website:
http://www.ug.it.usyd.edu.au/~sgre9702/week3/dropDownMenu/semantics.html
I want to centre the drop-down list items on the nav-bar, I know I can centre it with:
left:-11px;
However, I don't want to use a value I have calculated. Instead I would like it to automatically centre, taking the margin/padding values into consideration. I don't know if this is possible after googling around a bit.
My related HTML code is:
<nav>
<ul id="nav">
<li>Tours
<ul>
<li>New South Wales
<li>Australian Capital Territory
<li>Queensland
<li>Western Australia
<li>Northen Territory
<li>Tasmania
<li>South Australia
<li>Victoria
</ul>
<li>Attractions
<li>Food
<li>Resources
<li>About
<li>Contact
<ul>
<li>Online
<li>Phone
<li>Facimile
</ul>
</ul>
</nav>
The related CSS:
/* general nav list */
nav ul li {
background-color: #EEEEEE;
border-color: #000000;
border-style: solid;
border-width: 1px;
display: inline-block;
margin: 0px 5px;
padding: 5px;
position: relative;
text-align: center;
width: 120px;
}
/* nav sub list */
nav ul li ul {
display: none;
}
/* nav sub list shown */
nav ul li:hover ul {
display: block;
width: 142px;
position: absolute;
list-style-type: none;
}
/* nav sub list shown - list item */
nav ul li:hover ul li {
display:block;
background-color: #AACCFF;
border: solid 1px #000000;
position: relative;
/*left:-11px;*/
}

Answer 1

Remove the padding from the ul>li elements and apply to the anchors themselves (they will need display:block). Remove the margins from the sub-li elements
Then give the child ul width: auto. The submenu block will still be offset 1px to the right, though, as it will takes its left edge from where its parent's left border ends. You can get around that by either replacing the borders without outlines (which don't effect the widths of their host elements), putting borders on the child anchor/li elements or finally trying a left:-1px value on the child UL.