Buenas a todos, tengo un problemilla con la compatibilidad del css para firefox y explorer 6. Necesito hacer un menu que al pasar el raton por las distintas opciones se me desplieugen los submenus. El codigo del menu es el siguiente:
<div class="hst"><ul>
<li class="activo"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<div class="subhst"><ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul></div>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a>
<div class="subhst"><ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul></div>
</li>
<li><a href="#">Menu 5</a></li>
</ul></div>
En la hoja de estilos tengo los siguientes estilos definidos:
.hst{border-bottom:3px solid #7f7f7f;height:1%;clear:both;margin:2px 0 40px;float:left;width:97%}
.hst li{float:left;background:#ececec;padding:8px;borde r-right:1px solid #fff;height:1em}
.hst li a{color:#707477}
.hst li.activo{background:#7f7f7f}
.hst li.activo a{font-weight:bold;color:#fff}
.hst li:hover{background-color:#df671b;color:#fff}
.hst .subhst {display:none}
.hst li:hover .subhst{display:block; position:absolute}
.hst li:hover .subhst ul{position:relative;top:10px;left:-10px;clear:both}
.hst li:hover .subhst li{background:none}
.hst li:hover .subhst li:hover{font-weight:bold}
El caso es que en firefox va todo bien pero he leido que el explorer no interpreta el li:hover. Como puedo hacerlo ???
Hay que tener en cuenta que solo puedo tirar de css y no de javascript.
Gracias de antemano por cualquier ayuda que me podais facilitar.