0

Estoy creando un sistema el cual contiene un menu de navegacion vertical con varios menus y submenus y cuando quiero que se despliguen las opciones del menu vertical con el hover, ya sean del menu o del submenu. el menu no quiere desplegarse para mostrar las demás opciones, he intentado de todo y aun no logro hacer que se visualicen las opciones correctamente, por que creen que ocurre esto? omiti el codigo de mi header y solo coloco el del menu de navegacion que es el que no funciona correctamente.

    <div class="wrapper">
        
        <nav> 

            <ul class="menu-area">
                <li><a href=""><strong>Registro</strong> </a> 

                    <ul>
                        <li><a href="">Estudiantes</a></li>
                        <li><a href="">Obreros</a></li>
                    </ul>
                </li>

                <li><a href=""><strong>Estudiantes</strong></a>

                    <ul>
                        <li><a href="">Agrupaciones</a>

                            <ul>
                                <li> <a href=#> Rock Sinfónico </a> </li>
                                <li> <a href=#> Camerata Yaracuy </a> </li>
                            </ul>

                        </li>
                        
                        <li><a href="">Catedra</a>

                            <ul>
                                <li> <a href=#> Cátedra de Violín </a> </li>
                                <li> <a href=#> Cátedra de Viola </a> </li>
                            </ul>

                        </li>
                
                        <li><a href="">Formacion de adultos</a>

                            <ul>
                                <li> <a href=#> Piano </a> </li>
                                <li> <a href=#> Cuatro </a> </li>                       
                           </ul>

                        </li>
                    </ul>

                </li>

                <li><a href=""><strong>Obreros</strong></a>

                    <ul>
                        <li> <a href="">Administracion</a></li>
                        <li> <a href="">Docentes</a></li>
                        <li> <a href="">Limpieza</a></li>
                    </ul>

                </li>

            </ul>

        </nav>

    </div>
.wrapper{
    position: relative;
    margin: 0 auto;
    padding: 50px 0;
    clear: both;
}

.menu-area{
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: aqua;
    width: 250px;
}

.menu-area li{
    position: relative;
}

.menu-area li a{
    height: 36px;
    position: relative;
    border-bottom: 1px solid black;
    display: block;
    text-decoration: none;
    padding: 12px 20px;
    color: black;
}

.menu-area li a strong{
    display: block;
    text-transform: uppercase;
    font-size: 2vw;
    letter-spacing: 3px;
}

.menu-area li:hover > a{
    color: grey;
}

.menu-area li ul,
.menu-area li ul li ul{
    background: #262626;
    opacity: 0;
    visibility: hidden;
    transition: 300ms;
    z-index: 999; 
    left:280px;
    top: 0;
    list-style: none;
    position: absolute;
    height: auto;
    min-width: 250px;
    padding: 0;
    margin: 0;
}

.menu-area li: hover > ul, .menu-area li ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    left: 250px;
}

.menu-area li ul li a {
    text-transform: uppercase;
    font-size: 2vw;
    letter-spacing: 3px;
    padding: 10px;
    text-align: center;
    border: 0;
    border-bottom: 1px solid black;
    height: auto;
}

.menu-area li ul li ul{
    left: 230px ;
    top: 0;
    border: 0;
}

2 respuestas 2

0

Muy simple. es e un error muy simple suele pasar. solo tienes que eliminar el espacio entre el elemento y pseudo-clase :hover. De esta manera

.menu-area li:hover > ul, .menu-area li ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
left: 250px;

}

1
  • gracias por tu ayuda amigo, ya lo solucione Commented el 15 jul. 2020 a las 23:49
0

Hola espero y te ayude en algo lo que hice, solo que me quedo en horizontal pero si funciona lo del hover. Utilice otro estilo de css, espero y te sirva de algo.

 /* PROPIEDADES GENERALES */

* {
    margin: 0px;
    padding: 0px; 
    outline: 0;
}
.wrapper{
    position: relative;
    margin: 0 auto;
    padding: 50px 0;
    clear: both;
}
#menu {
    position: relative;
    margin: 0 auto;
    padding: 50px 0;
    clear: both;
}

#menu ul {
    list-style-type: none;
}

#menu ul li {
    width: 162px;
}

#menu ul li a {
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: rgba(59,93,148,1);
    border: solid 1px #fff;
    padding: 8px;
    position: relative;
}

#menu ul li ul li a {
    width: 160px;
    padding: 8px 0px;
    border-top-color: transparent;
}

#menu ul li ul {
    display: none;
}

/* PROPIEDADES ESPECÍFICAS */

#menu ul li ul li ul li a.primera {
    border-top-color: #fff;
}

#menu ul li.nivel1 { 
    float: left;
    margin-right: 1px;
}

#menu ul li a.nivel2 {
    color: #000;
}

#menu ul li a.nivel1, #menu ul li a.nivel2 {
    display: block;
    position: relative;
}

/* PROPIEDAD HOVER */

#menu ul li:hover {
    position: relative;
}

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
    background-color: #6CC;
    color: #000;
    position: relative;
}

#menu ul li:hover  ul.nivel2, #menu ul li a:hover  ul.nivel2{
    display: block;
    position: absolute;left: 0px;
}

#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {
    display: block;
    position: absolute;
    left: 161px;
    top:0px;
}

#menu ul li ul li a:hover {
    border-top-color: #000;
    position: relative;
}
<body> 
    <div id="menu">
        <ul>
            <li class="nivel1"><a href="#" class="nivel1">Registro</a>
                <ul class="nivel2">
                     <li><a href="#">Estudiantes</a></li>
                     <li><a href="#">Obreros</a></li>
                 </ul>
             </li>
             <li class="nivel1"><a href="#" class="nivel1">Estudiantes</a>
                 <ul class="nivel2">
                    <li class="nivel2"><a class="nivel2" href="#">Agrupaciones</a>
                        <ul class="nivel3">
                            <li><a class="primera" href="#">Rock Sinfóni</a></li>
                            <li><a href="#">Camerata Yaracuy</a></li>
                        </ul>
                    </li>

                    <li class="nivel2"><a class="nivel2" href="#">Catedra »</a>
                        <ul class="nivel3">
                            <li><a class="primera" href="#">Cátedra de Violín</a></li>
                            <li><a href="#">Cátedra de Viola</a></li>
                        </ul>
                    </li>
                    <li class="nivel2"><a class="nivel2" href="#">Formacion de adultos »</a>
                        <ul class="nivel3">
                            <li><a class="primera" href="#">Piano</a></li>
                            <li><a href="#">Cuatro</a></li>
                        </ul>
                    </li>
                </ul>
             </li>
             <li class="nivel1"><a href="#" class="nivel1">Obreros</a>
                <ul class="nivel2">
                    <li><a href="#">Administracion</a></li>
                    <li><a href="#">Docentes</a></li>
                    <li><a href="#">Limpieza</a></li>
                </ul>
            </li>
        </ul>   
    </div>
</body>

1
  • gracias por tu ayuda isabel <3 Commented el 16 jul. 2020 a las 8:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.