[Dúvida] dúvida

Oii Marcos, tudo bem?

Pra criar um dropdown (ou drophover) no submenu "Receitas", você pode seguir os passos abaixo. Vamos adicionar um submenu que aparece quando o usuário passa o mouse sobre o item "Receitas".

Primeiro, vamos ajustar o HTML para incluir o submenu:

<header class="cabecalho">
    <img class="logo" alt="Fruto & Fruta" src="./assets/img/logo.jpg"/>
    <nav class="menu">
        <ul class="menu-lista">
            <li class="menu-item"><a class="menu-link ativo" href="#">Início</a></li>
            <li class="menu-item">
                <a class="menu-link" href="#">Receitas</a>
                <ul class="submenu">
                    <li class="submenu-item"><a class="submenu-link" href="#">Sobremesas</a></li>
                    <li class="submenu-item"><a class="submenu-link" href="#">Pratos Principais</a></li>
                    <li class="submenu-item"><a class="submenu-link" href="#">Entradas</a></li>
                </ul>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">Quem somos</a></li>
            <li class="menu-item"><a class="menu-link" href="#">Comunidade</a></li>
        </ul>
    </nav>
</header>

Agora, vamos adicionar o CSS para estilizar o submenu e fazer com que ele apareça quando o usuário passar o mouse sobre o item "Receitas":

/* Estilos para o menu principal */
.cabecalho {
    align-items: center;
    background: #f9f9f9;
    display: flex;
    justify-content: space-between;
    padding-left: 2rem;
    padding-right: 2rem;
}

.menu-lista {
    display: flex;
}

.menu-item {
    list-style: none;
    position: relative; /* Necessário para posicionar o submenu */
}

.menu-link {
    color: #808080;
    margin-right: 1.25rem;
    text-decoration: none;
    text-transform: lowercase;
}

.menu-link.ativo {
    color: #333333;
    font-weight: bold;
}

.menu-link:hover {
    text-decoration: underline;
}

/* Estilos para o submenu */
.submenu {
    display: none; /* Esconde o submenu por padrão */
    position: absolute;
    top: 100%; /* Posiciona o submenu abaixo do item principal */
    left: 0;
    background: #f9f9f9;
    padding: 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.submenu-item {
    padding: 0.5rem 1rem;
}

.submenu-link {
    color: #808080;
    text-decoration: none;
    display: block;
}

.submenu-link:hover {
    background: #e0e0e0;
}

/* Mostra o submenu quando o item principal é hover */
.menu-item:hover .submenu {
    display: block;
}

Com essas alterações, quando o usuário passar o mouse sobre "Receitas", o submenu será exibido.

Você pode ajustar os estilos conforme necessário para se adequar ao design do seu site.

Um abraço e bons estudos.