CSS menu is not working in Firefox

[NelsonJoseph]

Hi All,
I have created a CSS Menu. It works fine in IE7 but it is not working in Firefox. In order to work with firefox what should I do. Please help me.
Thanks in advance.

Regards
- Nelson

The Code is:

<DIV class="menuwrapper">
<UL id="menubar">
<LI><A href="#" title="#">Home</A></LI>
<LI><A href="#" title="#">About Us</A></LI>
<LI><A href="#" title="#">Services</A>
<UL>
<LI><A href="#" title="#">Overview</A> </LI>
<LI><A href="#" title="#">Web Application Development</A> </LI>
<LI><A href="#" title="#">Mobile Applications</A> </LI>
</UL>
</LI>
<LI><A href="#" title="#">Technologies</A></LI>
<LI><A href="#" title="#">Case Studies</A></LI>
<LI><A href="#" title="#">Customers</A></LI>
<LI><A href="#" title="#">Careers</A></LI>
<LI><A href="#" title="#">Contact Us</A></LI>
</UL>
</DIV> 

The CSS would be:

.menuwrapper{
border-top:#6699CC 1px solid;
BORDER-BOTTOM: #6699CC;
BACKGROUND-COLOR: #6699CC;
font-size: 14px;
font-weight: bold;
}

#menubar {
WIDTH: 75em;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0spx;
WIDTH: 100%;
PADDING-TOP: 0px;
FONT-FAMILY: Trebuchet MS;
LIST-STYLE-TYPE: none;
}

#menubar UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 99%;
PADDING-TOP: 0px;
FONT-FAMILY: Trebuchet MS;
LIST-STYLE-TYPE: none;
}
/*Horizontal menu items*/
#menubar A {
BORDER-RIGHT: 1px solid;
PADDING-RIGHT: 10px;
DISPLAY: block;
PADDING-LEFT: 10px;
FONT-SIZE: 0.7em;
PADDING-BOTTOM: 5px;
COLOR: #FFFFFF;
PADDING-TOP: 5px;
TEXT-DECORATION: none;
font-size:12px;
}

#menubar LI {
float:left;
WIDTH: auto;
POSITION: static;
font-weight:bold;
}

#menubar LI UL {WIDTH: 12em;}

#menubar UL LI {WIDTH: 12em;}

#menubar UL LI A {
PADDING-RIGHT: 12px;
PADDING-LEFT: 16px;
PADDING-BOTTOM: 3px;
PADDING-TOP: 3px;
BORDER-RIGHT-WIDTH: 0px;
}

#menubar LI UL {
BORDER-LEFT: #6699CC 1px solid;
BORDER-RIGHT: #6699CC 1px solid;
BORDER-BOTTOM: #6699CC 1px solid;
BACKGROUND-REPEAT: repeat-x;
DISPLAY: none;
POSITION: absolute;
BACKGROUND-COLOR:#FFFFFF;
}

#menubar LI:hover A {background-color: none;}

#menubar LI:hover UL {DISPLAY: block;}

/*Drop down list*/
#menubar LI:hover UL A {
COLOR:#315E88;
BACKGROUND-COLOR: transparent;
}

#menubar UL A:hover {
COLOR: #000000! important;
BACKGROUND-COLOR: #D6DFF7! important;
}

[edited by: SuzyUK at 10:57 am (utc) on July 26, 2009]
[edit reason] code shortened & examplified [/edit]

[ohia]

it looks like youre missing a <ul> on the third list. im kinda new at this but that could be it. you may also need to close
<DIV class="menuwrapper">