css a starsze wersje explorera.

Mam pewien problem z menu na stronie. Menu jest przygotowane w stylach css, i na innych przeglądarkach wszystko śmiga idealnie. Na Explorerze 9 również. Jednak na wersjach starszych niż 9, gdy rozwijam menu i jadę myszką niżej, nagle ot tak z niczego menu się zamyka. O co chodzi? Muszę wstawić jakiś specjalny dodatek dla starszych wersji Explorera, czy jak? Spotkał się ktoś z czymś takim?

Napisałem pewien kod w pewnej wersji CSS, który działa na pewnych przeglądarkach, ale w IE nie działa.
Co może być nie tak?

Ja się z takim objawem zetknąłem na stronie czeskiego IM z prognozą pogody. Jakieś dwa lata temu strona została przebudowana i pod IE nie można było z comboxa wybrać godziny. Podobało mi się, że oficjalna strona instytucji państwowej nie działa pod żadną dostępną wersją IE.

OK., no to powiedzmy, że mam taki przykładowy kod tego menu:

A w stylach css mam to tak ogarnięte:

#MENUp {
width: 980px;
margin: 0 auto;
height: 51px;
padding-left:10px;
padding-right:10px;
background: url("tlo.png") repeat-x left;
}

div#Menu {
height: 45px;
float: left;
}

div#Menu a {
color: #FFF;
text-decoration: none;
}

div#Menu ul,
div#Menu li {
margin: 0px;
padding: 0px;
}

div#Menu li {
list-style: none;
list-style-image: none;
position: relative;
padding: 8px 10px;
white-space: nowrap;
}

#Menu #mainLevel {
padding-left: 0px;
height: 35px;
}

#Menu #mainLevel:hover {
background: url("cien.png") repeat-x left;
}

div#Menu a.font {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
background: url("pasek.png") no-repeat left;
padding-top: 8px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 10px;
text-decoration: none;
display: block;
}

div#Menu ul li:hover {
background: red;
}

/**

• Poziome menu pierwszego poziomu
  */
  div#Menu > ul li {
  float: left;
  }

div#Menu ul ul li {
background: #333;
float: none;
}

/**

• Menu kolejnych poziomow
  */
  div#Menu ul ul {
  z-index: 50;
  display: none;
  position: absolute;
  top: 51px;
  border-left: 1px solid red;
  }

div#Menu li:hover > ul {
display: block;
}

/**

• Menu drugiego poziomu - pierwsze rozwiniecie
  */
  div#Menu ul ul {
  left: 0px;
  }

div#Menu ul ul ul {
left: 100%;
top: 0px;
z-index: 75;
}

I na czym polega teraz magia, która zmieniłaby ten kod na przyswajalny dla Explorera 8 i starszych?.......

Kurczę.... Niechcący źle to wkleiłam:P Jeszcze raz:

 
<div id="MENUp">

<div id="Menu">
		  <ul>
				<li id="mainLevel">
					<a class="font" >Home &raquo;</a>
			  		<ul>
						<li><a href="costam.html">Coś</a></li>
						<li><a href="">Inne coś</a></li>
                        <li><a href="">Jeszcze inne coś</a></li>						
					</ul>
				</li>
				<li id="mainLevel">
					<a class="font">Bajer &raquo;</a>
				</li>
					<li id="mainLevel">
					<a class="font">Antybajer &raquo;</a>
				</li>
				</ul>								
</div>

</div>

I tutaj css:

#MENUp {
	width: 980px;
	margin: 0 auto;
	height: 51px;
	padding-left:10px;
	padding-right:10px;
	background: url("tlo.png") repeat-x left;
}

div#Menu {
	height: 45px;
	float: left;
}

div#Menu a {
	color: #FFF;
	text-decoration: none;
}


div#Menu ul,
div#Menu li {
	margin: 0px;
	padding: 0px;
}

div#Menu li {
	list-style: none;
	list-style-image: none;
	position: relative;
	padding: 8px 10px;
	white-space: nowrap;
}

#Menu #mainLevel {
	padding-left: 0px;
	height: 35px;
}

#Menu #mainLevel:hover {
	background: url("cien.png") repeat-x left;
}

div#Menu a.font {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	background: url("pasek.png") no-repeat left;
	padding-top: 8px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 10px;
	text-decoration: none;
	display: block;
}

div#Menu ul li:hover {
	background: red;
}

/**
 * Poziome menu pierwszego poziomu
 */
div#Menu > ul li {
	float: left;
}

div#Menu ul ul li {
	background: #333;
	float: none;
}

/**
 * Menu kolejnych poziomow
 */
div#Menu ul ul {
	z-index: 50;
	display: none;
	position: absolute;
	top: 51px;
	border-left: 1px solid red;
}

div#Menu li:hover > ul {
	display: block;
}

/**
 * Menu drugiego poziomu - pierwsze rozwiniecie
 */
div#Menu ul ul {
	left: 0px;
}

div#Menu ul ul ul {
	left: 100%;
	top: 0px;
	z-index: 75;
}