watsonad
05 Feb 2011, 05:35 PM
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
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