Having the same problem
My menu works in Firefox, but when I launch it in IE 7, the Level Two items disappear as soon as you attempt to hover the mouse over them.
ul#cssmw {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul li {
background-image: none;
float: none;
}
ul#cssmw li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
}
ul#cssmw li ul {
display: none;
top: 0;
}
ul#cssmw li:hover > ul {
display: block;
position: absolute;
}
ul#cssmw > li {
background-image: url("../cssmw_images/left.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw > li > span {
background-image: url("../cssmw_images/right.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw > li > span > a {
background-image: url("../cssmw_images/center.jpg");
background-repeat: repeat-x;
color: #fff;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
height: auto;
margin: 0 8px 0 8px;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: auto;
}
ul#cssmw > li:hover {
background-image: url("../cssmw_images/left_hover.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw > li:hover > span {
background-image: url("../cssmw_images/right_hover.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw > li:hover > span > a {
background-image: url("../cssmw_images/center_hover.jpg");
background-repeat: repeat-x;
}
ul#cssmw ul.level-1 {
left: 0px;
top: 100%;
}
ul#cssmw ul.level-1 > li {
background-image: none;
}
ul#cssmw ul.level-1 > li > a {
background-color: #fff;
background-image: none;
border-bottom: solid 1px #BABDC2;
border-left: solid 1px #BABDC2;
border-right: solid 1px #BABDC2;
color: #2D2B2E;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: auto;
}
ul#cssmw ul.level-1 > li > a:active {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}
ul#cssmw ul.level-1 > li:hover > a {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}
ul#cssmw ul.level-2 {
left: 112px;
}
ul#cssmw ul.level-2 > li {
background-image: none;
}
ul#cssmw ul.level-2 > li > a {
background-color: #fff;
background-image: none;
border-bottom: solid 1px #BABDC2;
border-left: solid 1px #BABDC2;
border-right: solid 1px #BABDC2;
color: #2D2B2E;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}
ul#cssmw ul.level-2 > li > a:active {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}
ul#cssmw ul.level-2 > li:hover > a {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}