0

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;
}

1 Resposta 1

-3

O problema que você está enfrentando é causado pelo espaçamento entre os links e o conteúdo do dropdown quando você usa margin-top. Uma abordagem para resolver isso é adicionar um padding-top à .add_links em vez de padding e remover o margin-top de .promo_content. Isso evita que o espaço extra entre o link "Promoções" e o conteúdo do dropdown interfira no hover.

Aqui está uma sugestão de modificação no seu CSS:

.add_links {
    display: flex;
    justify-content: center;
    list-style: none;
    background-color: #872341;
    margin: 0px;
    padding-top: 8px; /* Adicione padding-top em vez de padding */
    gap: 4rem;
    box-shadow: inset 0 0 2px #000000;
}

.promo_content {
    position: absolute;
    background-color: white;
    width: 150px;
    /* Remova o margin-top para evitar o espaço extra */
    /* margin-top: 8px; */
    display: none;
    z-index: 22;
}

Essa alteração mantém o espaço visual entre os links, usando o padding-top em vez de margin-top, evitando problemas com o hover do dropdown. Experimente fazer essa alteração e veja se resolve o problema que você está enfrentando.

1
  • 1= imagem do meu comando i.sstatic.net/iPF1r.png 2= imagem fazendo as alterações que você indiciou i.sstatic.net/56YkK.png A barra muda muito e perde seu visual, não tenho ideia de como vou conseguir arrumar isso sem ter aquele espaço ali, acho que vou ter que estilizar de outra forma :/ Commented 23/11/2023 às 22:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .