2

Hola espero tengan un excelente día. Estoy empezando con css y html y en este momento estoy tratando de hacer una menú desplegable con hover, y agregarle estilo con css, quiero que al pasar el mouse cambie el color y se desplieguen los items pero no hay caso de que me funcione agradecería su ayuda y comprensión para saber en que estoy fallando. Gracias.

Este es el código hecho:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <header>Menu</header>
    <nav  class="all">
        
            <a id="title" href="">
                <ul>Inicio
                    <li>Productos</li>
                    <li>Empleados</li>
                    <li>Nosotros</li>
                </ul></a>                       
                <a id="title" href="">
                    <ul>Contacto
                    <li>Mapa</li>
                    <li>Telefono</li>
                </ul></a>
            <a id="title" href="">
                <ul>FAQ</ul>
                </a>
            <a id="title" href="">
                <ul>Opiniones
                    <li>Sugerencias</li>
                    <li>Comentarios</li>
                </ul></a>
    </nav>

<style type="text/css">
    .all {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}
 
 #title {
    display: block;
    padding: 1em;
    background-color: #F9B55C;
    text-decoration: none;
    color: #191C26;
}
#title  ul : hover {
    background-color: #CC678B;
}
#title  ul > li {
    display: none;
}
#title > ul li : hover {
    display: block;
}
</style>

</body>
</html>
1
  • 1
    Los id's deben ser únicos, sustituye usando una clase igual para todos Commented el 4 sept. 2021 a las 3:23

2 respuestas 2

3

Al parecer tienes unos espaciados en el hover y el css no los detecta. Te recomiendo que los estilos que le diste a #title los pases a la etiqueta ul, así quedaría:

<style type="text/css">
    .all {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    }
 
     #title {

     text-decoration: none;
    
    
    } 
    #title ul{
     color: #191C26;
    display: block;
    padding: 1em;
    background-color: #F9B55C;
    }

    #title  ul:hover {
    background-color: #CC678B;
    }
    #title  ul > li {
    display: none;
    
    }
    #title  ul:hover > li {
    display: block;

    
    }
    </style>
1
  • Gracias me fue de gran ayuda
    – Nicolas
    Commented el 5 sept. 2021 a las 21:29
0

Cambié un poco la forma en que estructuras tu html, por ejemplo:

<a><ul>Title...</ul></a>

por

<div>Title<ul>...</ul></div>

porque un elemento inline( <a/>) no debe tener un elemento block(<ul/>) como hijo. Tambien el elemento <ul/> es el que desapareceré en vez de los elemento <li/>.

Tambien cambié a todos los elmento que usan el mismo id:<a id="title"/> por <div class="title"/>. Porque el id está diseñado para ser unico. Para mas información.

Tambien note lo mismo que dijo Oswaldo Cuevas : Css no interpleta los espacio antes de nombrar el evento: X(ul :hover), X(ul: hover), Y(ul:hover).

Reestructure tambien tu CSS:

/*Desaparecemos el elemento para que no se vea la lista de opciones.*/
#title ul{
    display:none;
}
/*Si precionamos #title haremos que el elemento tenga el color morado.*/
#title:hover{
    background-color: #CC678B;
}
/*Si precionamos #title modificaremos su hijo ul y haci haremos que aparesca.*/
#title:hover > ul {
    background-color: #F9B55C;
    display:block;
}
/*Como queremos que el elemento li seleccionado por el puntero cambie el color, le cambiamos display: block; por background-color: #44aFFF;*/
#title  ul li:hover {
    background-color: #44aFFF;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <header>Menu</header>
        <nav class="all">
            <!--Quité los enlances y coloqué un div, recuerda un elemento inline no puede tener como hijo un elemento block.-->
            <div class="title">
                <!--Puse el titulo a fuera del ul.-->
                Inicio
                <ul>
                    <li>Productos</li>
                    <li>Empleados</li>
                    <li>Nosotros</li>
                </ul>
            </div>
            <div class="title">
                Contacto
                <ul>
                    <li>Mapa</li>
                    <li>Telefono</li>
                </ul>
            </div>
            <div class="title">
                FAQ
                <ul></ul>
            </div>
            <div class="title">
                Opiniones
                <ul>
                    <li>Sugerencias</li>
                    <li>Comentarios</li>
                </ul>
            </div>
        </nav>
        <style type="text/css">
            .all {
                display: flex;
                padding: 0;
                margin: 0;
                list-style: none;
            }
            /*Nota display bloc, lo unico que hace es que el elemento se comporte como block, pero no lo transforma en block.*/
            .title {
                display: block;
                padding: 1em;
                background-color: #F9B55C;
                text-decoration: none;
                color: #191C26;
            }
            /*Desaparecemos el elemento para que no se vea la lista de opciones.*/
            .title ul{
                display:none;
            }
            /*Si precionamos #title haremos que el elemento tenga el color morado.*/
            .title:hover{
                background-color: #CC678B;
            }
            /*Si precionamos #title modificaremos su hijo ul y haci haremos que aparesca.*/
            .title:hover > ul {
                background-color: #F9B55C;
                display:block;
            }
            /*Como queremos que el elemento li seleccionado por el puntero cambie el color, le cambiamos display: block; por background-color: #44aFFF;*/
            .title  ul li:hover {
                background-color: #44aFFF;
            }
        </style>
    </body>
</html>

Espero que los comentarios sean suficientes para aclarar cualquier duda que tengas, pero si tiene mas dudas no dudes en preguntar.

Update:

  1. Antes no tome en cuenta que el codigo repetia el mismo id. Le pido gracias a: BetaM por ayudarme a ver algunos errores de esta respuesta.
1
  • 1
    Gracias por la info y aclaraciones me fueron de gran ayuda
    – Nicolas
    Commented el 5 sept. 2021 a las 21:31

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.