Estoy realizando un menú desplegable a partir de un tutorial, está todo perfecto pero ahora quiero conseguir que el menú se desplegue al hacer click en el primer enlace y después se mantenga abierto. (No se si me abré explicado muy bien)
Dejo el código HTML del menú:
Código:
Y el código css <div id="dlmenu">
<ul id="menu">
<li class="gallery">
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dt><a href="index.html">1.HOME</a></dt>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="#">2.EMPRESA</a></dt>
<dd><a href="empresa.html">2.1 Presentación</a></dd>
<dd><a href="politica.html">2.2 Politica de empresa</a></dd>
<dd><a href="salud.html">2.3 Salud y seguridad</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="#">3.TRABAJOS</a></dt>
<dd><a href="rehabilitacion.html">3.1 Rehabilitación</a></dd>
<dd><a href="obranueva.html">3.2 Obra Nueva</a></dd>
<dd><a href="pintura.html">3.3 Pintura</a></dd>
<dd><a href="revestimientos.html">3.4 Revestimientos</a></dd>
<dd><a href="cubiertas.html">3.5 Cubiertas</a></dd>
<dd><a href="canalizacionesbajantes.html">3.6 Canalizaciones-Bajantes</a></dd>
<dd><a href="patios.html">3.7 Patios</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="#">4.SERVICIOS</a></dt>
<dd><a href="emergencia.html">4.1 Emergencias</a></dd>
<dd><a href="fotografia.html">4.2 Fotografia</a></dd>
<dd><a href="vehiculos.html">4.3 Vehículos</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="gallery">
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dt><a href="contacto.php">5.CONTACTO</a></dt>
</li>
</ul>
</div>
Código:
Podéis ver el funcionamiento actual del menú en http://www.revesmar.com#colMenu{
width:200px;
height:300px;
background-color:#009933;
float:left;
}
#dlmenu {
height:200px;
margin:0;
width:200px;
height:300px;
float:left;}
#menu {
list-style-type:none;
margin:0 0 2px;
padding:0;
position:absolute;
width:5em;
z-index:100;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
width:200px;
height:450px;
float:left;
background-image:url(../images/fondo_botonera.jpg);}
#menu li {
display:block;
padding:0;
margin:0;
position:relative;
z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background-image:url(../images/btn_prin_fndo.jpg); color:#cc9900; font-weight:bold; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:180px;}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em; font-family:Arial, Helvetica, sans-serif;}
#menu dl {width: 200px; margin: 0; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 10px; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; visibility:visible; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 20px; background-image:url(../images/btn_prin_fndo2.jpg);}
.gallery dd a, .gallery dd a:visited {color:#FFF7C4; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 30px; }
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover { background-image:url(../images/seleccion.png); color:#fff; font-weight:bold;}
Muchas gracias por vuestra ayuda.
Un saludo.
