CSS Menu not working in Firefox.

[swee17hp]

Hi,

I'm not very good at CSS and is hitting a brickwall.

Here's the link:
http://www.tgsnopec.com/_us/emails/internal/test2/index.html

The menu works in IE7 but it doesn't work in Firefox.

All helps are greatly appreciated.

Thanks,
Mark

Code in CSS that I believe is responsible for the menu

/* *************************************************************************** */
/* Rollover Menu Section */
/* *************************************************************************** */
div#mainMenu {
position: absolute;
margin: 25 0 0 0;
width: 570px;
border-top: 1px dotted #FFF;
z-index: 100;
}
div#mainMenu ul {
padding: 0;
margin: 0;
background-color: #E4E3DE;
}
div#mainMenu li {
position: relative;
list-style: none;
float: left;
}
div#mainMenu li a {
font-size: 11px;
font-weight: bold;
color: #333;
display: block;
padding: 1px 8px 3px;
text-align: left;
}
div#mainMenu li a.mainMenu:hover {
color: #000;
}
div#mainMenu li a.subMenuLevel2 {
color: #000;
background-color: #E4E3DE;
width: 150px;
border-bottom: 1px dotted #FFF;
text-transform: none;
font-weight: normal;
}
div#mainMenu li a.subMenuLevel2:hover {
background-color: #CFCEC8;
}
div#mainMenu>ul a {
width: auto;
}
div#mainMenu ul ul {
position: absolute;
width: 150;
visibility: hidden;
}
div#mainMenu ul.level1 li.submenu:hover ul.level2,
div#mainMenu ul.level2 li.submenu:hover ul.level3 {
visibility: visible;
}
div#mainMenu ul.level3 {
top: 0px;
left: 150px;
}
li.submenu>ul.level3>li {
left: 16px;
}

[taghaboy]

hi,
the menu work perfectly, in mouse over the menu and line color change.

[swee17hp]

Well, if you compare it to IE7 and hover over "ABOUT US", you will see 3 other sub menus.

I can't see the sub menus in Firefox.

Thanks!