Horizontal nav

[watsonad]

I have a list-based horizontal nav bar with dropdowns on hover over each of the top level list items. The entire nav bar shifts to the left by about 5 pixels whenever I hover over the last item in the list. If I remove the dropdown list for the last element, the nav bar no longer shifts when I hover over the last item. The html and css are as follows:

HTML
<div id="header">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Activities</a>
<ul>
<li><a href="#">Choir</a></li>
<li><a href="#">Drama</a></li>
</ul>
</li>
<li><a href="#">Athletics</a>
<ul>
<li><a href="#">Football</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Baseball</a></li>
</ul>
</li>
</ul>
</div>


CSS
#header {
width: 100%;
height: 48px;
background-color: #012f66;
}

#nav {
margin: 0px;
padding-top: 20px;
text-align: center;
list-style: none;
font-size: 1.6em;
}

#nav li {
display: inline;
font-family: 'LithosProRegular', 'Helvetica', 'Arial', sans-serif;
color: white;
position: relative;
}

#nav a {
display: inline-block;
color: white;
text-decoration: none;
padding: 0em 1em 0em 1em;
}

#nav ul {
position: absolute;
top: 100%;
left: 0%;
display: none;
text-align: left;
}

#nav ul li {
display: block;
font-family: 'LithosProRegular', 'Helvetica', 'Arial', sans-serif;
color: white;
background-color: #012f66;
font-size: 0.8em;
}

#nav li:hover ul {
display: block;
}

#nav li:hover a {
text-decoration: none;
color: #F3E06D;
}

#nav li:hover ul a {
text-decoration: none;
color: white;
padding: 0.6em;
}

#nav li:hover ul a:hover {
text-decoration: none;
color: #F3E06D;
}

#nav ul a {
white-space: nowrap;
display: block;
}

a {
color: white;
text-decoration: none;
}

a:hover {
text-decoration: none;
color: #F3E06D;
}


When I hover over "Athletics", the entire nav bar shifts to the left. If I take out the second level list (drop down), then the nav bar doesn't shift when I hover over "Athletics". Any thoughts?

Tony

[Wickham]

I don't see any shift in Firefox. However, the drop down doesn't work in IE7. There's a space between the top level and the drop down level and when you move your mouse over the space, the connection is lost and the dropdown level disappears. This is difficult to cure. My advice would be to start with a menu that works from cssplay
http://www.cssplay.co.uk/menus/
and edit it. Here's a basic menu:-
http://www.cssplay.co.uk/menus/basic_dd.html