0

*{
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

nav{
    height: 80px;
    display: flex;
    padding: 0 50px;
    justify-content: space-between;
    align-items: center;
}

nav ul{
    display: flex;
}

nav ul li a{
    padding: 7px 10px;
    margin: 0 5px;
    font-size: 18px;
}

nav ul li a:hover{
    background-color: #ef2219;
    color: #fff;
}

/*--------------------submenu---------------*/
.children{
    display:none;
}

nav ul li a:hover + ul, nav ul li ul:hover{
    display:flex;
    position: absolute;
    flex-direction: column;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <nav>
            <div>
                <img  class="img-menu" src="">
            </div>
            <ul>
                <li class="menu__ul_li"><a>NOSOTROS</a></li>
                <li class="submenu">
                    <a href="#">DEPORTES</a>
                    <ul class="children">
                        <li><a href="#">tenis </a></li>
                        <li><a href="#">futbol</a></li>
                    </ul>
                </li>
                <li class="menu__ul_li"><a>ALGO</a></li>
                <li class="menu__ul_li"><a>CONTACTO</a></li>
            </ul>
        </nav>
    </body>
</html>

mas alla de la separacion de los botones del submenu, quiero saber por que el fondo del boton TENIS se superpone al boton de deportes y no los separa los paddings de cada uno cuando toco el boton TENIS, el background de ese boton tapa lo que seria el background del boton DEPORTES. quiero saber por que pasa eso, vi soluciones que son totalmente distintas. pero quiero entender como funciona

2 respuestas 2

1

La verdad que hacer un dropdown en html es bastante repetitivo y en tu caso te estan faltando algunas cosas a tener en cuenta, como un z-index=1 y un min-width para los elementos del dropdown. A parte, te recomiendo que no trabajes con listas a la hora de hacer los navbar sino con divs directamente, yo lo prefiero. Te dejo la solucion propuesta, un saludo:

HTML

    <ul>
        <li class="menu__ul_li"><a>NOSOTROS</a></li>
        <li class="submenu">
            <div class="dropdown">
                <a href="#" class="dropbtn">DEPORTES</a>
                <div class="dropdown-content">
                    <a href="">Link 1</a>
                    <a href="">Link 2</a>
                    <a href="">Link 3</a>
                </div>
            </div>
        </li>
        <li class="menu__ul_li"><a>ALGO</a></li>
        <li class="menu__ul_li"><a>CONTACTO</a></li>
    </ul>

CSS

.dropdown {
    position: relative;
    display: inline-block;
    transition: .4s;
}

.dropbtn {
    color: black;
    background-color: transparent;
    border: none;
    padding: 7px 10px;
}

.dropbtn:hover {
    background-color: #ef2219;
    color: white;
    border: none;
}

.dropdown-content {
    padding-top: .5rem;
    display: none;
    position: absolute;
    min-width: 160px;
    z-index: 1;
}

.dropdown-content a {
    padding: 6px 10px;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}
1

Usa el método transform: translate(50px, 100px); en donde el primer valor es x y el segundo es y para el elemento que contiene el "dropdown" en esta parte de tu CSS

nav ul li a:hover + ul, nav ul li ul:hover{
    display:flex;
    position: absolute;
    flex-direction: column;
    transform: translate(valor en x, valor en y);
}

Así podrás desplazarla para acomodarla a tu gusto, ánimo.

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.