Menu items indented

Weird space before first item in drop down

[garann]

Hi,

I'm hoping someone can see the trouble with the code below. I get some strange spacing errors in the first two levels of the menu.

In the top level (links across the top), the links appear to be spaced randomly far apart. In the first sub-menus, the first link in each is indented about 10px.

This is for an internal application, so it only needs to work in IE6 for Windows.

Any help is greatly appreciated - thanks in advance!

HTML

<div class="menu-bar">
<a href="" class="top-menu" onmouseover="showIt('sub1');" onmouseout="hideIt('sub1');">One
<span class="mid-menu" id="sub1" style="display:none;" onmouseout="hideIt(this.id);">
<a href="" onmouseover="showIt('sub1');">One-One</a><br>
<a href="" onmouseover="showIt('sub1');">One-Two</a><br>
<a href="" onmouseover="showIt('sub1');">One-Three</a><br>
</span></a>
<a href="" class="top-menu">Two</a>
<a href="" class="top-menu" onmouseover="showIt('sub3');" onmouseout="hideIt('sub3');">Three
<span class="mid-menu" id="sub3" style="display:none;" onmouseout="hideIt(this.id);">
<a href="" onmouseover="showIt('sub3');">Three-One</a><br>
<a href="" onmouseover="showIt('sub3');">Three-Two</a><br>
<a href="" onmouseover="showSub('sub3','sub3-3');" onmouseout="hideIt('sub3-3');">Three-Three</a><br>
<span class="sub-menu" id="sub3-3" style="display:none;top:3em;" onmouseout="hideIt(this.id);">
<a href="" onmouseover="showSub('sub3','sub3-3');">Three&nbsp;Three&nbsp;One</a><br>
<a href="" onmouseover="showSub('sub3','sub3-3');">Three&nbsp;Three&nbsp;Two</a><br>
<a href="" onmouseover="showSub('sub3','sub3-3');">Three&nbsp;Three&nbsp;Three</a><br>
</span></a>
<a href="" onmouseover="showIt('sub3');">Three-Four</a><br>
<a href="" onmouseover="showIt('sub3');">Three-Five</a><br>
</span>
<a href="" class="top-menu" onmouseover="showIt('sub4');" onmouseout="hideIt('sub4');">Four
<span class="mid-menu" id="sub4" style="display:none;" onmouseout="hideIt(this.id);">
<a href="" onmouseover="showIt('sub4');">Four-One</a><br>
<a href="" onmouseover="showIt('sub4');">Four-Two</a><br>
<a href="" onmouseover="showIt('sub4');">Four-Three</a><br>
</span></a>
<a href="" class="top-menu">Five</a>
<a href="" class="top-menu">Six</a>
</div>

CSS

.menu-bar
{
position: absolute;
top: 10px;
left: 5px;
font-family: Tahoma;
border: gray 1px solid;
font-size: 12px;
background-color: gainsboro;
margin: 0px;
margin-top: .5em;
padding: 5px;
}
.menu-bar a:link, .menu-bar a:visited {
position: relative;
border: gainsboro 1px solid;
background-color: gainsboro;
margin: 0px;
padding: 1px 10px;
color: #000;
text-decoration: none;
z-index: 2;
}
.menu-bar a:hover {
border: lightgrey 1px solid;
background-color: whitesmoke;
color: #000;
text-decoration: none;
}
.menu-bar a:active 
{
border: white 1px solid;
background-color: lightgrey;
color: #000;
text-decoration: none;
}
.menu-bar .mid-menu {
position: absolute;
top: 2em;
left: 0px;
margin: 0px;
padding: 2px;
border: gainsboro 1px solid;
background-color: gainsboro;
}
.menu-bar .mid-menu a {
display: inline;
height: 1.5em;
margin: 0px;
margin-top: -1px;
padding: 0px 10px;
z-index: 3;
}
.menu-bar .sub-menu 
{
position: absolute;
top: 0px;
left: 90%;
margin: 0px;
margin-top: -1px;
padding: 2px;
border: gainsboro 1px solid;
background-color: gainsboro;
}
.menu-bar .sub-menu a {
position: relative;
top: 0px;
left: 0px;
display: inline;
margin: 0px;
padding: 0px;
z-index: 4;
}

[garann]

Update:
Nevermind, I got it figured out. In case anyone else runs into this:

I can fix the weird spacing of the top level menu by removing the line breaks after menu items with no submenus. The space at the beginning of the submenus is margin and padding from the link that opens them.