Tengo un codigo al que llevo todo el dia dandole vueltas y no se como hacerlo funcionar...
Es un menu con dos desplegables uno dentro de otro. El caso es que despues de muchas vueltas he conseguido que el menu desplegable se oculte, pero no consigo que se muestre cuando yo quiero...
Un alma caritativa que sepa ver donde esta el problema?
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Prueba desplegable</title> <style> a{ font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:normal; font-weight:bold; color:#A0A2A3; text-decoration:none;} /*-------------------------------------------------*/ #menu{width:auto; height:auto;} #menu ul { margin:0; padding:0; list-style-type:none;} #menu ul li.nivel1 { float:left; width:auto; padding:0 10px} #menu ul li a {display:block; position:relative; padding:0 10px; } #menu ul li:hover {position:relative;} #menu ul li a:hover, #menu ul li:hover a.bt_menu_4 {background-color:#58AC25; color:#FFFFFF; position:relative;} #menu ul li a.nivel1 {display:block!important; display:none; position:relative;} /*-------------------------------------------------*/ #menu ul li ul {display:none;} #menu ul li a:hover ul, #menu ul li:hover ul {display:block; position:absolute; left:0px;} #menu ul li ul li a {margin:0; width:160px; text-align:left; border-left:#58AC25 1px solid; padding: 1px 10px;} #menu ul li ul li a:hover {position: relative;} #menu ul li a:hover ul li ul, #menu ul li:hover ul li ul {display:none;} #menu ul li ul li a:hover ul li ul, #menu ul li ul li:hover ul li ul {display:block; position:absolute; left:0px;} </style> </head> <body> <div id="menu"> <ul> <li class="nivel1"><a href="#">Boton 1</a></li> <li class="nivel1"><a href="#">Desplegable 1</a> <ul> <li><a href="#">Boton 1-1</a></li> <li><a href="#">Boton 2-1</a></li> <li><a href="#">Desplegable 1-1</a> <ul> <li><a href="#">Boton 1-1-1</a></li> <li><a href="#">Boton 2-1-1</a></li> </ul> </li> <li><a href="#">Desplegable 2-1</a> <ul> <li><a href="#">Boton 1-2-1</a></li> <li><a href="#">Boton 2-2-1</a></li> </ul> </li> <li><a href="#">Boton 3-1</a></li> <li><a href="#">Boton 4-1</a></li> </ul> </li> <li class="nivel1"><a href="#">Boton 3</a></li> <li class="nivel1"><a href="#">Boton 4</a></li> </ul> </div> </body> </html>
