No funciona el código en Internet Explorer

A ver, os comento:

Estoy creando una página a la cuál le quiero poner un menú horizontal desplegable. No tenía ni idea de cómo hacerlo y el CSS lo he buscado en internet. El problema viene de que en Mozilla se ve perfectamente, pero no así en Internet Explorer. No sé cuál puede ser el problema. De hecho el CSS tiene tantos bloques que no lo entiendo bien del todo.

También se dan unos problemillas de descuadre del menú en Mozilla y Explorer que tampoco sé de donde pueden venir.

El CSS es este:

body{
background:#fff;

}

/* Root = Horizontal, Secondary = Vertical */
ul#menu {
ba
margin: 0;
border: 0 none;
padding: 0;
margin-left:230px;/*Margen del menu por la izquierda*/
/* width: 500px;*/ /*For KHTML*/
width:677.4px;/*Ancho de la barra del menu*/
list-style: none;
height: 20px;
border:1px solid #eee;
padding-bottom:5px;
}

ul#menu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 20px;
text-align:left;
}
ul#menu li{
padding-bottom:5px;
}
ul#menu li:hover{
background:#ddd;
}

ul#menu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 25px;
left: 10px;
background: #eee;
border: none;
opacity: 0.8;
-moz-opacity: 0.8;
filter:alpha(opacity=80);
}

ul#menu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#menu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#menu a {
padding: 5px 15px 5px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
color: #9fcf21;
text-decoration: none;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
/* border-right:1px solid #818181;*/
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#menu a:hover,
ul#menu li:hover a,
ul#menu li.iehover a {
color: #003300;

}

/* 2nd Menu */
ul#menu li:hover li a,
ul#menu li.iehover li a {
float: none;
border:none;
}

/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
background:#ddd;
color: #003300;
}

/* 3rd Menu */
ul#menu li:hover li:hover li a,
ul#menu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 3rd Menu Hover Persistence */

ul#menu li:hover li:hover li a:hover,
ul#menu li:hover li:hover li:hover a,
ul#menu li.iehover li.iehover li a:hover,
ul#menu li.iehover li.iehover li.iehover a {
background:#ddd;
color: #FFF;
}

/* 4th Menu */
ul#menu li:hover li:hover li:hover li a,
ul#menu li.iehover li.iehover li.iehover li a {
background:#ddd;
color: #666;
}

/* 4th Menu Hover */
ul#menu li:hover li:hover li:hover li a:hover,
ul#menu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}

ul#menu ul ul,
ul#menu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu li:hover ul ul,
ul#menu li:hover ul ul ul,
ul#menu li.iehover ul ul,
ul#menu li.iehover ul ul ul {
display: none;
}

ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
display: block;
}
ul#menu .selected{
color: #003300;
}

Y el HTML este:

<div>
<ul id="menu">




<li><a class="selected" href="./">Inicio</a></li>
<li><a href="#">Calendario</a>
<ul>
<li><a href="#">Ruta</a>
<ul>
<li><a href="#">Cadetes</a></li>
<li><a href="#">Juveniles</a></li>
<li><a href="#">Elite-sub23</a></li>
<li><a href="#">Elite-Pro</a></li>
</ul>
</li>
<li><a href="#">Pista</a></li>
<li><a href="#">Ciclocross</a></li>
<li><a href="#">BTT</a></li>

</ul>
</li>
<li><a href="#">Clasificaciones</a>
<ul>
<li><a href="#">Ruta</a>
<ul>
<li><a href="#">Cadetes</a></li>
<li><a href="#">Juveniles</a></li>
<li><a href="#">Elite-sub23</a></li>
<li><a href="#">Elite-Pro</a></li>
</ul>
</li>
<li><a href="#">Pista</a></li>
<li><a href="#">Ciclocross</a></li>
<li><a href="#">BTT</a></li>

</ul>

</li>
<li><a href="#">Reglamentos</a>

</li>

<li><a href="#">Envío de carreras</a>
<ul>
<li><a href="#">FEBICI</a></li>
<li><a href="#">VASCA</a></li>
</ul>

</li>

<li><a href="#">Circulares</a>

</li>

<li><a href="#">Contacto</a>

</li>

</ul>
</div>

Me podriaís ayudar a descifrar el CSS por favor?

hola
para poder ayudarte
debes darnos la url de tu web para verlo

saludos

Gracias Yaneth, la URL es: http://cvac.mywebcommunity.org/inicio.html