Problema con menu desplegable en CSS

rafamadrile · #1 (**permalink**) 11/08/2010, 09:23

Buenas.

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>

ArturoGallegos · #2 (**permalink**) 11/08/2010, 10:06

en las ultimas dos lineas de tu CSS estas aplicando estilos para el 4to nivel y debe ser para el tercero

#menu ul li ul li a:hover ul li ul