CSS Verticle Flyout Menu Help!

[mrmojo]

I am trying to get a css verticle flyout that works in IE6 & IE7. I can get it to work except I need the flyout line height to be smaller than the main heght.

I have two versions, one everythng works correctly and my main navigation height 25 pixels and my flyout menu is 20 pixels (allowing me to fit many links in the drop down, while keeping good space between the main navigation links). This version does not work in IE6 & IE7.

The second version works in all browsers but I can not get the line height of the flyout different from the main navigation.

This is what I want it to look like (will not work in IE6 & IE7) <snip>

This is what I currently have:

CODE:

<div id="menu">
<ul id="toplevel">
<li><a class="hide" href="index.html">HOME</a></li>
<li><a class="hide" href="specifics.html">specifics</a></li>
<li><a class="hide" href="specifics.html">specifics</a></li>
<li><a class="hide" href="specifics.html">specifics</a></li>
<li><a class="fly" href="#url">specifics
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="specifics.html">specifics</a></li>
<li><a href="specifics.html">specifics</a></li>
<li><a href="specifics.html">specifics</a></li>
<li><a href="specifics.html">specifics</a></li>
<li><a href="specifics.html#specifics">specifics</a></li>
<li><a href="specifics.html#specifics">specifics</a></li>
<li><a href="specifics.html#specifics">specifics</a></li>
<li><a href="specifics.html#specifics">specifics</a></li>
<li><a href="specifics.html#specifics">specifics</a></li>
<li><a href="specifics.html#specifics">specifics</a></li>
<li><a href="specifics.html#specifics">specifics</a></li>
<li><a href="specifics.html#specifics">specifics</a></li>
<li><a href="specifics.html#specifics">specifics</a></li>
<li><a href="specifics.html#specifics">specifics</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#url">Privacy</a></li>
</ul>
</div>

CSS:

#menu {
height:300px;
width:153px;
position:relative;
}

#menu ul {
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
text-align:left;
padding:0px;
}

#menu li {
margin:0;
padding:0;
list-style:none;
}
#menu li {
display:inline-block;
display:inline;
}
#menu ul ul {
position:absolute;
left:-9999px;
}
#menu ul#toplevel {
position:absolute;
left:0px;
top:0;
width: 153px;
padding-top: 3px;
}

#menu a {
display:block;
color:#FFFFFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #880000;
line-height: 25px;
height: 25px;
}

#menu ul li:hover > ul {
left:100%;
background-color: #999;
margin-top: -26px;
}

#menu a:hover ul,
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {
left:100%;
}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {
left:-9999px;
}

#menu li a:hover {
color:#fff;
background-color: #09c;
}
#menu li:hover > a {
color:#990000;
background-image: url(graphics/hover_grey.jpg);
background-color: #FFFFFF;
}
#menu li a.fly {
background-repeat: no-repeat;
background-position: right top;
}
#menu li a.fly:hover {
background-color: #09c;
background-repeat: no-repeat;
background-position: right top;
}
#menu li:hover > a.fly {
background-color: #09c;
background-repeat: no-repeat;
background-position: right top;
}

#menu table {
position:absolute;
left:99%;
width:0;
border-collapse:collapse;
margin-top:-7px;
margin-left:-1px;
}

Here is a link to the page above <snip>

Thanks for any help!

[edited by: swa66 at 11:21 pm (utc) on Nov. 20, 2009]
[edit reason] No links, no specifics please see ToS and Forum Charter [/edit]

[mrmojo]

I should not say line height but rather the space between (above & below) each link!