Dropdown menu works ok in IE but strange in FF

help with firefox malcfuntion

[silverbytes]

This is a common pure css dropdown menu, works ok in IE, but Firefox is not showing the link with sublevels properly, instead showing that when you rollover, right at bottom of main link, it shows all the time, to the left of main menu.

Html code, this is menu:

<div id="menuwrapper"><ul id="p7menubar"><li><a href="/bla.htm">Anchor</a></li><li><a class="trigger" href="/bla1.htm">Has levels</a></li><ul><li><a href="#">Level1 </a></li><li><a href="#">Level2</a></li><li>
</ul><li><a href="/bla3.htm">Anchor</a></li></ul><br class="clearit"></div>

======================================
Css file code:

#menuwrapper {
BORDER-TOP: 1px solid #999999;
BACKGROUND-IMAGE: url(photos/menuoff.png);
BORDER-BOTTOM: 1px solid #CCCCCC;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-COLOR: #FFFFFF;
background-position: center;
MARGIN: 0px;
WIDTH:100%;
}
.clearit {
CLEAR: both; FONT-SIZE: 0px; LINE-HEIGHT: 0; HEIGHT: 0px
}
#p7menubar {
FLOAT:left;
WIDTH: 100%;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
LIST-STYLE-TYPE: none;
}
#p7menubar UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; LIST-STYLE-TYPE: none
}
#p7menubar A {
BORDER-RIGHT: #333 1px solid;
PADDING-RIGHT: 6px;
DISPLAY: block;
PADDING-LEFT: 5px;
FONT-SIZE: 1em;
PADDING-BOTTOM: 5px;
PADDING-TOP:5px;
TEXT-DECORATION: none;
color: #CC0000;
}
#p7menubar A.trigger {
PADDING-RIGHT: 16px; BACKGROUND-POSITION: right center; PADDING-LEFT: 10px; BACKGROUND-IMAGE: url(images/p7PM_dark_south.gif); PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BACKGROUND-REPEAT: no-repeat
}
#p7menubar LI {
FLOAT: left; WIDTH: 9em
}
#p7menubar LI {
POSITION: relative
}
#p7menubar LI {
WIDTH: auto; POSITION: static
}
#p7menubar LI UL {
WIDTH: 18em
}
#p7menubar UL LI {
WIDTH: 18em
}
#p7menubar UL LI A {
PADDING-RIGHT: 11px; PADDING-LEFT: 16px; PADDING-BOTTOM: 3px; COLOR: #565656; PADDING-TOP: 3px; BORDER-RIGHT-WIDTH: 0px; BORDER-LEFT: #333 1px solid;
}
#p7menubar LI UL {
BORDER-RIGHT: #333333 1px solid; DISPLAY: none; BORDER-BOTTOM: #333333 1px solid; BACKGROUND-REPEAT: repeat-x; POSITION: absolute; BACKGROUND-COLOR: #ffffff
}
#p7menubar LI:hover A {
COLOR: #000000;
}
#p7menubar A:focus {
COLOR: #000000;
background-color: #FFFFFF;
}
#p7menubar A:active {
COLOR: #000000;
}
#p7menubar LI.p7hvr A {
COLOR: #000000;
background-color: #FFFFFF;
}
#p7menubar LI:hover UL {
DISPLAY: block
}
#p7menubar LI.p7hvr UL {
DISPLAY: block
}
#p7menubar LI:hover UL A {
COLOR: #000000; BACKGROUND-COLOR: transparent
}
#p7menubar LI.p7hvr UL A {
COLOR: #000000; BACKGROUND-COLOR: transparent
}
#p7menubar UL A:hover {
COLOR: #ffffff! important; BACKGROUND-COLOR: #CC0000! important
}

[scriptmasterdel]

The problem is with the HTML.

The list item that has a second level ul closes before the submenu list is open, like so:

<div id="menuwrapper">
<ul id="p7menubar">
<li><a href="/bla.htm">Anchor</a></li>
<li><a class="trigger" href="/bla1.htm">Has levels</a></li>
<ul>
<li><a href="#">Level1 </a></li>
<li><a href="#">Level2</a></li>
<li>
</ul>
<li>
<a href="/bla3.htm">Anchor</a></li>
</ul><br class="clearit">
</div>

So by containing the list inside the ul it detects sub items instead of a new menu being placed in the middle of another menu.

<div id="menuwrapper">
<ul id="p7menubar">
<li><a href="/bla.htm">Anchor</a></li>
<li><a class="trigger" href="/bla1.htm">Has levels</a>
<ul>
<li><a href="#">Level1 </a></li>
<li><a href="#">Level2</a></li>
<li>
</ul>
</li>
<li><a href="/bla3.htm">Anchor</a></li>
</ul><br class="clearit">
</div>

I hope this helps.