Boa noite, estou tento um problema no meu código
na div.promo_content eu coloquei a estilização margin-top: 8px; para ficar na mesma altura do .add_links padding: 8px; só que está afetando o meu efeito de dropdown pois quando passo o mouse no link "promoções" e vou descer para os promo_content a bendita margin faz o conteudo fechar pelo fato de ter um espaço entre eles, queria saber se tem um jeito eficaz de resolver isso.
se puderem me dar dicas para simplificar ou melhorar qualquer parte agradeço, comecei a pouco tempo.
<ul class="add_links">
<li class="add_link promo_dropdown">
<a class="promobtn" href="#">Promoções</a>
<div class="promo_content">
<a href="#">Promoção 1</a>
<a href="#">Promoção 2</a>
<a href="#">Promoção 3</a>
<a href="#">Promoção 4</a>
<a href="#">Promoção 5</a>
</div>
</li>
<li class="add_link"><a href="/pages/catalogos.html">Catálogos</a></li>
<li class="add_link"><a href="#">Casal</a></li>
<li class="add_link"><a href="#">Solteiro</a></li>
<li class="add_link"><a href="#">Login</a></li>
<li class="add_link"><a href="#">Sobre Nós</a></li>
<li class="add_link"><a href="#">Registro</a></li>
</ul>
CSS
/* barra de links */
.add_links {
display: flex;
justify-content: center;
list-style: none;
background-color: #872341;
margin: 0px;
padding: 8px;
gap: 4rem;
box-shadow: inset 0 0 2px #000000;
}
.add_link a {
text-decoration: none;
color: rgb(237, 237, 237);
font-size: 20px;
transition: transform 0.3s ease-in-out;
display: inline-block;
white-space: nowrap;
position: relative;
}
.add_link > a:hover {
transform: scale(1.1);
}
.promo_content a:hover .promobtn {
color: blue;
}
/* transform */
.add_link > a::after {
content: '';
position: absolute;
right: 0;
bottom: -2px;
height: 2px;
width: 100%;
background-color: rgb(255, 255, 255);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease-in-out;
}
.add_link a:hover::after {
transform: scaleX(1);
}
/* Dropdown */
li.promo_dropdown {
position: relative;
display: inline-block;
}
div.promo_content {
position: absolute;
background-color: white;
width: 150px;
margin-top: 8px;
display: none;
z-index: 22;
}
.promo_dropdown:hover .promo_content {
display: block;
}
.promo_content a {
color: black;
padding: 12px 16px;
text-align: left;
text-decoration: none;
display: block;
border: 1px solid black;
}