EL XHTML
Código :
<div id="viviendas1" onmouseover="abre()" onmouseout="cierra()" > <img src="<?=$viv?>" alt=""/> <div id="viviendas2"> <div id="atico"> <span>Penthouse</span><br/> <a href="#">Penthouse A</a><br/> <a href="#">Penthouse B</a><br/> </div> <div id="segunda"> <span>Segunda Planta</span><br/> <a href="#">Vivienda A</a><br/> <a href="#">Vivienda B</a><br/> <a href="#">Vivienda C</a><br/> </div> <div id="primera"> <span>Primera Planta</span><br/> <a href="#">Vivienda A</a><br/> <a href="#">Vivienda B</a><br/> <a href="#">Vivienda C</a><br/> </div> <div id="patio"> <span>Planta Patio</span><br/> <a href="#">Vivienda A</a> </div> </div> </div>
EL CSS DE viviendas1 y viviendas2
Código :
div#contenedor div#barra_menu div#viviendas1 { position:relative; width:83px; height:23px; font-size:10px; line-height:14px; text-align:left; border-left:1px solid #d6d6d6; float:left; z-index:90; } div#contenedor div#barra_menu div#viviendas1 div#viviendas2 { position:absolute; left:-1px; bottom:24px; height:185px; width:83px; vertical-align:top; border-left:1px solid #d6d6d6; border-right:1px solid #D6D6D6; z-index:100; background-color:white; }
y finalmente un poquito de javascript
Código :
// JavaScript Document abre = function() { menu_abre = document.getElementById("viviendas2"); menu_abre.style.display = "block"; } cierra = function() { menu_cierra = document.getElementById("viviendas2"); menu_cierra.style.display = "none"; }
como veis, es simple la cosa, a viviendas1 le digo que onmouseover me haga la funcion abre(), que lo que hace es establecer la propiedad display de viviendas2 en block, y en onmouseout cierra(), que establece display en none, desapareciendo.
Lo que me ocurre en firefox es que parece como si no pillase bien el onmouseout, porque a veces no funciona... Si alguien sabe el porque de el problema agradecria mucho la ayuda.
Salúd