I'm putting a mouseover drop down menu on a site I'm building... in IE6, the mouseover highlight causes the whole menu item to shoot off to the side and down a bit (about 11 inches to the right and down about 3 inches). The sub menu doesn't even appear anywhere that I can see. In FF (both 2 and 3) the whole menu shows perfectly... but the menu items acting as 'parents' to submenus lose their ability to be used as links (at most a minor inconvenience at this stage).

Since it's only up on my home server, and I'd rather not catch comcast's ire... could anyone who might have any ideas (or might be willing to volunteer IE7) let me know and I'll pm a link (or 3...).

The html side is just the generic unordered list base:

Code:

<div id="navbar">   <ul>     <li><a href="./">Main</a></li>     <li><a href="./?page=services">Services</a>       <ul>         <li class="sub"><a href="./?page=services">Repair</a></li>         <li class="sub"><a href="./?page=services">Consulting</a></li>         <li class="sub"><a href="./?page=services">Somethin else</a></li>       </ul>     </li>     <li><a href="./?page=news">News</a></li>     <li><a href="./?page=downloads">Downloads</a></li>     <li><a href="./?page=about+us">About Us</a></li>     <li><a href="./?page=contact+us">Contact Us</a></li>   </ul> </div>

The CSS is pulled from an online menu generator, then adjusted a little for the job (the copyright notice that goes with it's cut here for space):

Code:

#navbar { clear: both; float: center; width: 870px; padding-left: 90px; height: 50px; padding-top: 30px; margin-top: -25px; margin-left: -2px; color: #fff; text-align: center; background-image: url(images/buttonbar.jpg); background-repeat: no-repeat; background-position: center top; z-index: 100; } #navbar ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; float: center; } #navbar li { float: left; text-align: center; width: 9em;} #navbar li.sub { background-color: #fff; width: 13em; border: 1px solid #37f} #navbar table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; } #navbar a, #navbar a:visited { border: 0px solid #37f; display: block; text-decoration: none; height: 2em; line-height: 2em; color: #37f; padding: 0em 1em; font-weight: bold; font-style: normal; font-variant: normal; text-transform: none; } #navbar b { float: right; margin-right: 5px; } * html #navbar a, * html #navbar a:visited { } * html #navbar a:hover { color: #fff; background-color: #37f; position: relative; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } #navbar li:hover { position: relative; text-align: center; } #navbar a:active, #navbar a:focus { color: #fff; background-color: #37f; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } #navbar li:hover > a { color: #fff; background-color: #37f; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } #navbar li ul { padding: 2em; visibility: hidden; position: absolute; top: 0em; left: -4em; background-color: transparent; } #navbar li:hover > ul { visibility: visible; } #navbar ul a:hover ul ul { visibility: hidden; } #navbar ul a:hover ul a:hover ul ul { visibility: hidden; } #navbar ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; } #navbar ul a:hover ul { visibility: visible; } #navbar ul a:hover ul a:hover ul { visibility: visible; } #navbar ul a:hover ul a:hover ul a:hover ul { visibility: visible; } #navbar ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }

The overall block for #navbar sets it to overlay correctly on the page, which works perfectly under every browser I've tested... it's not at all taken from that generator (and therefore is more likely to be the source of my problems).

Any glaring mistakes (besides my jumping in so far over my head at 3am last night, of course).