0

Estuve intentando hacer un menú desplegable utilizando css y html, pero me surgió un problema, y es que si uso position absolute se me traslapan las cajas, y si uso alguna como relative las cajas que no son parte del menú desplegable también bajan, lo cuál me imposibilita poder trabajar correctamente con el nav.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Abrazo de Oso | Inicio</title>
        <link rel="icon" href="resources/favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="stylesheets/toolkit-nav.css">
        <link rel="stylesheet" href="stylesheets/normalize.css">
        <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/4a3c81f854.js" crossorigin="anonymous"></script>
        <meta charset="utf-8">
    </head>
    <body>
        <header>
            <div class="toolkit-bar">
                <p class="toolkit-bar__text toolkitbar__content">¡Visita nuestras redes sociales!</p>
                <div class="toolkit-bar__icons toolkit-bar__content"><a href="https://www.instagram.com/abrazodeoso.peluches/" target="_BLANK"><i class="fab fa-instagram"></i></a></div>
                <div class="toolkit-bar__icons toolkit-bar__content"><a href="https://m.facebook.com/100083547669607/" target="_BLANK"><i class="fa-brands fa-square-facebook"></i></a></div>
                <div class="toolkit-bar__icons toolkit-bar__content"><a href="https://wa.me/+56984460812" target="_BLANK"><i class="fa-brands fa-whatsapp"></i></a></div>
            </div>
            <nav class="nav">
                <div class="nav__container-logo">
                        <div class="nav__logo">
                            <img src="resources/logo.png" alt="Logo">
                </div>
                <div class="nav__buttons">
                    <ul class="nav__buttons-container">
                        <li class="nav__buttons-item nav__item-categorias"><a href="#">Categorías</a>
                           <ul class="nav__buttons-item-submenu">
                               <li class="nav__buttons-item-submenu-li"><a href="#">Categoría 1</a></li>
                               <li class="nav__buttons-item-submenu-li"><a href="#">Categoría 2</a></li>
                               <li class="nav__buttons-item-submenu-li"><a href="#">Categoría 3</a></li>
                               <li class="nav__buttons-item-submenu-li"><a href="#">Categoría 4</a></li>
                           </ul>
                        </li>
                        <li class="nav__buttons-item nav__item-contacto"><a href="#">Contacto</a></li>
                        <li class="nav__buttons-item nav__item-informacion"><a href="#">Información</a></li>
                        <li class="nav__buttons-item nav__item-tendencia"><a href="#">Tendencias</a></li>
                    </ul>        
                </div>
            </nav>
        </header>
    </body>
</html>

Fragmento CSS

* {
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
    padding: 0;
    text-decoration: none;

.nav {
    display: flex;
    background-color: rgb(253, 208, 234);
    box-shadow: 100px;
    box-shadow: 0px 5px 14px -4px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 5px 14px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 14px -4px rgba(0,0,0,0.75);
}

.nav__container-logo {
    width: 100%;
    height: 150px;
    padding: 5px 0px;
    margin-top: -50px;
}

.nav__logo {
    padding-bottom: 20px;
}

.nav__logo img {
    width: 7%;
    position: relative;
    left: 50px;
    top: 46px;
    border-bottom: none;
    z-index: 100;
}

.nav__buttons-container{
    list-style-type: none;
    text-align: center;
    margin-right: 280px;
}

.nav__buttons-item {
    display: inline-block;
    text-align: center;
    margin-right: 40px;
}

.nav__buttons-item a {
    padding: 4px 50px 4px 10px;
    color: rgb(51, 51, 51);
    background-color: rgb(253, 208, 234);
    border-left: 3px solid rgb(250, 145, 227);
    text-decoration: none;
    font-weight: bold;
    text-align: center;
}

.nav__buttons-item a:hover {
    background-color: rgb(255, 222, 245);
    color: rgb(51, 51, 51);
}

.nav__buttons-item-submenu-li {
    display: none;
    position: relative;
    margin-top: 10px;
}

.nav__item-categorias:hover .nav__buttons-item-submenu-li {
    display: block;
}

.nav__item-categorias:hover .nav__buttons-item {
    position: relative;
}

También intenté cambiar algunas clases, pero tampoco me ha resultado totalmente, ¿Qué puedo hacer para resolver el problema? Cabe recalcar que también estoy utilizando normalize.

1 respuesta 1

1

Cuando pones position: absolute a un elemento este toma de referencia para posicionarse en el elemento padre con position: relative más cercano, si no se lo colocas a nada este se posicionará en referencia al body, pero si se le colocas el position: relative a uno de los padres como he puesto el ejemplo, el elemento absolute se posicionará con ese padre de referencia.

.container {
  width: 500px;
  height: 500px;
  background-color: gray;
}
.padre1 {
  width: 300px;
  height: 300px;
  background-color: red;
}
.padre2 {
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: relative;
}

.elemento {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
<div class="container">
  <div class="padre1">
    <div class="padre2">
        <a href="#" class="elemento">Mi elemento</a>
    </div>
</div>
</div>

En el ejemplo está posicionado a 20px de abajo y 20px de izquierda dentro del padre2, si pones el position: relative en el padre1, verás como toma de referencia ese div para posicionarse en su lugar correspondiente.

Seguramernte se te desplaza porque está tomando como referencia para posicionarse la caja que no toca.

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.