css position in menu different in IE and Firefox

[javaguy78]

Website Example:
http://www.themaskedcrusader.com/main//pages/test-page.php

Explanation of the problem:
http://www.themaskedcrusader.com/main//pages/test-page/help.php

The Problem:

I have been working on a pure css menu on my website. The sub menu's are hidden by css until a link is hovered. You can see this on the top link. My problem is this: The CSS for the submenu is this:

#menu li:hover ul
{
display: block;
position: absolute;
font-size: 8pt;
margin-top: 3px;
border: 1px #EEE solid;
}

In Firefox, the sub menu is displayed properly below it's parent.

http://www.themaskedcrusader.com/main//media/help/ffox.gif

In Internet Explorer 7, the sub menu floats right of the parent rather than below.

http://www.themaskedcrusader.com/main//media/help/ie.gif

I can get the thing to float below by changing the position to relative, but then the parent cells (which are not static widths) are jumpy.

The only way to fix this that I have found is to use Position Relative and set the width of the parent == to the width of the child, I don't want to do that.

Is there an easy way to get the sub menu to display the same in IE and Firefox without all that hubbub?

[javaguy78]

I have been scouring the internet for help and I haven't found any. I'd be very grateful for any information that can fix this.

[Excavator]

Hello javaguy78,
I hope I'm right... I didn't actually test this in IE. Only FF.

Your using position: absolute; on your drop down but your not giving it a position so the different browsers are just putting it where they think it should go.
Try this instead:#menu li:hover ul
{
display: block;
position: absolute;
top: 22px;
font-size: 8pt;
margin-top: 3px;
border: 1px #EEE solid;
}

Also thought it was kind of odd that you give ul a class with no name and li a class that you don't style in your CSS. See here:target="_top">Programming</a>
<ul class=""> <!--no name???-->
<li class="menu-first"> <!--menu-first is not found in your CSS-->
<a href="http://www.themaskedcrusader.com/main//pages/programm

You need to add missing </body> tag at the end. Like this:</li><li class="menu-sibling menu-last"><a href="http://www.themaskedcrusader.com/main//pages/guestbook.php" target="_top">Guestbook</a>

</li></ul>
</body>
</html>

[javaguy78]

I'll give that a try.

The Unordered list is not my programming. the CMS that I am using dynamically creates the menu, so the classes are part of the CMS, I'm just writing the CSS to manipulate the menu. I'll see if there is a way to specify a class for the nested UL, though I don't know.

Thanks for the help.. I'll post back with my findings