View Full Version : Vertical menu shifts 2px in IE when hovered

09-22-2007, 12:06 PM
In IE my vertical menu shifts 2-3 pixels when I hover over any list item with a second level. How do I make it stop? It works fine in Firefox.

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>SBH Menu Experiments</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
node.onmouseout=function() {
(" over", "");
<style type="text/css">
body { background: #fe9 url(images/blueback.jpg) repeat-y; margin: 0; padding: 0; }
body * { margin: 0; padding: 0; text-decoration: none; }
#nav { width: 149px; position: absolute; left: 0; top: 0; padding-top: 200px;
background: transparent url(images/sbhbrand.gif) no-repeat left top; }
#nav li { width: 149px; text-align: right; list-style-type: none; text-transform: uppercase; position: relative; }
#nav a { display: block; padding: 6px 10px; width: 129px; color: #fff; font: bold .8em/1.2em "Trebuchet MS", Arial, sans-serif; }
#nav a:hover, #nav a:focus { background-color: #aec5e4; color: #258; text-decoration: none; }

/* 2nd-level navigation */
#nav li ul { position: absolute; left: 150px; top: 0; width: 149px;
background-image: url(images/blueback.jpg); display: none; }
#nav li ul li {text-align: left;}
#nav li:hover ul, #nav li.over ul { display: block; }


<ul id="nav">
<li><a href="directions.html">Directions</a>
<!--directions submenu-->
<li><a href="directions_sail.html">Sailing Instructions</a></li>
<li><a href="directions_drive.html">Driving &amp; Parking</a></li>
<li><a href="directions_public.html">Public Transportation</a></li>
<!--end directions submenu-->
<li><a href="berthing.html">Berthing</a>
<!--berthing submenu-->
<li><a href="rates.html">Rates</a></li>
<li><a href="reservations.html">Reservations</a></li>
<li><a href="waitlist.html">Waiting List</a></li>
<!--end berthing submenu-->
<li><a href="regulations.html">Rules &amp; Regulations</a></li>
<li><a href="newsletters.html">Newsletter</a></li>
<li><a href="services.html">Harbor Services</a></li>
<li><a href="links.html">Local Links</a></li>
<li><a href="improvements">Planned Improvements</a></li>
<li><a href="faq.html">F.A.Q.</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="index.html">Home</a></li>

09-22-2007, 01:08 PM
Add float:left; to #nav li

09-22-2007, 07:31 PM
Thanks very much. That fixed it! Why does that work?

How does the code look in IE7?

09-22-2007, 07:58 PM
floating prevents child elements affecting the parent. Usually you will need to use clear to move the child away from the parent.

Looks OK in IE7. Except for the poor color difference with the text and background in all browsers.