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.