Drop Down Menu Creates Mystery Gap IE

[fry2010]

I have just completed some updates to my site and have applied a drop down menu list using pure CSS.

 

In I.E. it appears that it is forcing the main page down, and creates a gap that is the same distance that the biggest drop down list goes to.

 

Check it out here: http://www.forextradingsignalservice.com

 

Here is the CSS for the list link:

 

#top-nav {
bottom: 0px;
padding-bottom: 12px;
margin: 17px 0 40px 0;
list-style-type: none;
display: block;
font-variant: small-caps;
font-size: 85%;
float: left;
width: 100%;
position:relative;
z-index:5;
}


#top-nav li {
float: left;
position: relative;
}

/*--- #top-nav a {
display:block;
padding:5px;
color: #ffffff;
background: #000000;
text-decoration: none;
}

#top-nav a:hover {
color: #ffffff;
background:#6b0c36;
text-decoration: underline;
} ---*/


/*--- DROPDOWN ---*/

#top-nav ul {
background: #ffffff;
background: rgba(255,255,255,0); /* TRY TO MAKE INVISIBLE - KEEP THIS */
list-style:none;
position: absolute;
left: -9999px; /* THIS WILL HIDE THE DROP DOWN LIST WHEN NOT USED - KEEP THIS */
}

#top-nav ul li {
padding-top: 1px;
float: none;
}

#top-nav ul a {
white-space: nowrap;
}

#top-nav li:hover ul {
left: 0;
top: 32px;
background-color: #242424;
padding-bottom: 4px;
}


#top-nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration: none;
}

 

 

It works fine in firefox and chrome.

[AyKay47]

they work fine for me in I.E. what version are you using to view your website?

 

[fry2010]

thanks for checking it out, I am using version 9.

 

I didnt quite mean the drop down menu itself, but rather that it creates a massive white gap between the header and the page content. Unless you do not see a big white gap there?

[AyKay47]

theres a gap but it is not huge and looks like it should be there

[fry2010]

hmm.. Ok thanks.