CSS menu works only in IE

About CSS display issues in all browsers

[shvemel]

Hello folks.
I have a CSS written by someone but seems not to be completed, it is showing well in IE but with FF, Opera and Safari the sub-menus would hide beneath the main-menu frame. Check it out <snip>

I appriciate any idea!

[2]
/*--menu--*/
.menu {
clear:both;
 overflow:hidden;
width:186px;
padding:0 12px;
 background:#781b32;
}
.menu ul#nav {
float:left;
width:150px;
margin:0;
padding:2;
background:#781b32;
}
.menu ul#nav li {
float:left;
width:100%;
list-style:none;
font-size:13px;
line-height:16px;
}
.menu ul#nav li:hover,
.menu ul#nav li.hover {position:relative;}
.menu ul#nav li:hover ul,
.menu ul#nav li.hover ul {display:block;}
.menu ul#nav li:hover ul ul,
.menu ul#nav li.hover ul ul {display:none;}
.menu ul#nav li ul li:hover ul,
.menu ul#nav li ul li.hover ul {display:block;}
.menu ul#nav li:hover ul ul ul,
.menu ul#nav li.hover ul ul ul {display:none;}
.menu ul#nav li ul li ul li:hover ul,
.menu ul#nav li ul li ul li.hover ul {display:block;}
.menu ul#nav li a {
float:left;
color:#edc3ab;
text-decoration:none;
}
.menu ul#nav li a:hover {
color:#fff;
text-decoration:underline;
}
.menu ul#nav li span {
display:block;
overflow:hidden;
width:100%;
background:url(../images/arrow.gif) no-repeat 100% 3px;
}
.menu ul#nav ul {
position:absolute;
top:-8px;
left:150px;
margin:0;
padding:8px;
width:160px;
background:#781b32;
z-index:543;
display:none;
}
.menu ul#nav ul li {
float:left;
width:100%;
list-style:none;
}
.menu ul#nav ul ul {
position:absolute;
top:-8px;
left:160px;
margin:0;
padding:8px;
width:130px;
background:#781b32;
z-index:563;
display:none;
}
.menu ul#nav ul ul ul {
position:absolute;
top:-8px;
left:130px;
margin:0;
padding:8px;
width:160px;
background:#781b32;
z-index:663;
display:none;
}
.menu ul#nav ul.long {width:190px;}
[/2]

[edited by: swa66 at 2:04 pm (utc) on Oct. 21, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

[rocknbil]

Welcome aboard shvemel, first basic question: does the page validate [validator.w3.org]? Usually the question is the inverse, works in everything **except** IE, get it to validate and it will render in Standards Compliance Mode and will probably help a lot.