-3

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

.container {
    width: 90vw;
    margin: 0 auto;
}

.home {
    display: flex;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 30px;
    
}

.header-direito {
    display: flex;
    align-items: center;
    justify-content: center;
}

.botao-pesquisa {
    border: none;
    background-color: initial;
    height: 4vh;
    margin-left: 6px;
}

.search {
    border: none;
    border-radius: 10px;
    background-color: rgb(148, 148, 148);
    height: 4vh;
    padding: 10px;
}

.redes-sociais {
    display: flex;
    margin-left: 10px;   
}

.redes-sociais li {
    margin-left: 4px
}

.menu-inicial a {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 6px;
    background-color: rgb(181, 36, 36);
    font-family: 'Lato', sans-serif;
    color: white;
    
}

.menu-inicial a:hover {
    color: rgb(211, 140, 8);
}

.menu-inicial ul {
    display: flex;
}

.menu-inicial li {
    width: 100%;
    text-align: center;
    position: relative;   
}

.menu-inicial li:hover .dropdown li {
    display: block;
    top: 0px;
    border-color: black;
}

.dropdown li {
    display: none;
    top: 0px;
    width: 200px;
}

.dropdown {
    display: flex;
    flex-direction: column;
    position: absolute;
    box-shadow: 5px 5px rgb(39, 39, 39);
    border-radius: 30px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estudo CSS</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/49008e2987.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <header class="home">
            <figure class="logo">
                <a href="#"><img src="https://static.macupdate.com/products/30094/m/espresso-logo.webp?v=1655627850" alt="Espresso CSS"></a>
                <figcaption>Estudo de CSS</figcaption>
            </figure>
            <div class="header-direito">
                <input class="search" id="search" type="search" placeholder="Pesquise">
                <button class="botao-pesquisa"><a href="#search"> <i class="fa-solid fa-magnifying-glass fa-lg" style="color: #000000;"></i></a></button>
                <ul class="redes-sociais">
                    <li><a href="https://facebook.com" class="facebook"><i class="fa-brands fa-facebook-square fa-xl" style="color: #000000"></i></a></li>
                    <li><a href="https://facebook.com" class="facebook"><i class="fa-brands fa-twitter-square fa-xl" style="color: #000000"></i></a></li>
                    <li><a href="https://facebook.com" class="facebook"><i class="fa-brands fa-instagram-square fa-xl" style="color: #000000"></i></a></li>
                    <li><a href="https://facebook.com" class="facebook"><i class="fa-brands fa-youtube-square fa-xl" style="color: #000000"></i></a></li>
                </ul>
            </div>
        </header>
        <main class="central">
            <nav class="menu-inicial">
                <ul class="itens-menu">
                    <li><a class="dropdown-btn" href="#">Institucional</a>
                        <ul class="dropdown">
                            <li><a href="#">Institucional e História</a>
                            <li><a href="#">Institucional e saber mais</a>
                            <li><a href="#">Institucional é legal</a>
                            <li><a href="#">Institucional</a>
                            <li><a href="#">Institucional</a>
                        </ul>
                    </li>
                    <li><a href="#">Institucional</a></li>
                    <li><a href="#">Início</a></li>
                    <li><a href="#">Institucional</a></li>
                    <li><a href="#">Início</a></li>
                    <li><a href="#">Institucional</a>
                        <ul class="dropdown">
                            <li><a href="#">Institucional</a>
                            <li><a href="#">Institucional</a>
                            <li><a href="#">Institucional</a>
                            <li><a href="#">Institucional</a>
                            <li><a href="#">Institucional</a>
                        </ul>
                    </li>
                    <li><a href="#">Início</a></li>
                    <li><a href="#">Institucional</a></li>
                    <li><a href="#">Início</a></li>
                    <li><a href="#">Institucional</a></li>
                    <li><a href="#">Início</a></li>
                    <li><a href="#">Início</a></li>
                    <li><a href="#">Início</a></li>
                </ul>
            </nav>
        </main>
        </header>
    </div>
    
</body>
</html>

1 Resposta 1

-3

Você pode remover a linha box-shadow: do .dropdown {} e inserir

.dropdown li a {    
    border-radius:5px;
    margin-top:0.1rem;
    width:100%;
    box-shadow: 5px 5px rgb(39, 39, 39);
}

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 .