Hola amigos, necesito que me ayuden en esto.
Tengo un menu en css que funciona a la perfeccion, funciona de la siguiente manera, esta una imagen de una lupa siempre visible, cuando posiciono el cursor sobre la imagen aparecen 2 opciones, buscador de documentos y buscador de fotos, cuando paso por encima de alguna de estas dos opciones aparece otro submenu.
Como lo dije anteriormente funciona a la perfeccion, lo que quiero es que las opciones no aparezcan hasta que el usuario de clic sobre las opciones, me podrian ayudar de favor??
el css es este:
Código PHP:
.nav{
font-family: Arial, sans-serif;
list-style:none;
font-size:11px;
margin:0;
padding:0;
}
.nav > li {
float:left;
list-style:none;
height:25px;
}
.nav li a {
font-family: Arial, Helvetica, sans-serif;
background-color: #e6d6ba;
color:#741e07;
display:block;
padding:0px 5px;
text-decoration:none;
}
.nav li .flecha{
font-size: 9px;
padding-left: 10px;
display: none;
}
.nav li a:not(:last-child) .flecha {
display: inline;
}
.nav li a:hover {
background-color: #e6d6ba;
color:#876830;
text-decoration:none;
}
.nav li {
position:relative;
}
.nav li ul {
font-family: Arial, Helvetica, sans-serif;
display:none;
position:absolute;
min-width:200px;
list-style:none;
margin:0;
padding:0;
left:-145px;
}
.nav li:hover > ul {
color:#876830;
display:block;
background-color:#f4eee4;
}
.nav li ul li ul {
left:-286px;
top:0;
}
y el codigo del menu es este:
Código PHP:
<div id="buscarmas">
<ul class="nav" style="z-index:100; position:absolute;">
<li><a href="#"><img src="imagenes/lupamas.gif" width="20" height="20" border="0" /></a>
<ul>
<li style="padding:10px 0px 10px 0px;"><a href="#" style="padding-top:10px; padding-bottom:10px;">Busqueda avanzada Fotografía</a>
<ul>
<li>Opcion de Fotografias</li>
</ul>
</li>
<li style="margin:0px 0px 10px 0px;"><a href="#" style="padding-top:10px; padding-bottom:10px;">Busqueda avanzada Documentos</a>
<ul>
<li>Opcion de documentos</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>