Buongiorno!
Sto creando una landing page come FE di una app che gestisce un supermercato.

Posto il codice html:
codice:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Supermarket App</title>
    <link rel="stylesheet" href="./style.css" />
    
</head>
<body>
    <nav>
        <div class="navbar__container">
            <div class="navbar__logo">
                <img src="./logo.svg" alt="Website logo" />
            </div>
           <div id="hormenu"><!-- div che contiene il menu -->
            <ul> <!-- lista principale: definisce il menu nella sua interezza -->
            <li>
                <a href="#">Home</a> <!-- primo list-item, prima voce del menu -->
                
            </li> <!-- Chiudo il list-item -->
            <li>
                <a href="#">Clienti</a> <!-- primo list-item, prima voce del menu -->
                <ul> <!-- Lista annidata: voci del sotto-menu -->
                <li><a href="#">Creazione</a></li>
                <li><a href="#">Modifica</a></li>
                <li><a href="#">Cancella</a></li>
                <li><a href="#">Blocco</a></li>
                
                </ul> <!-- Fine del sotto-menu -->
            </li> <!-- Chiudo il list-item -->  
            <li>
                <a href="#">Ordini</a> <!-- primo list-item, prima voce del menu -->
                <ul> <!-- Lista annidata: voci del sotto-menu -->
                <li><a href="#">Creazione</a></li>
                <li><a href="#">Modifica</a></li>
                <li><a href="#">Cancella</a></li>
                
                </ul> <!-- Fine del sotto-menu -->
            </li> <!-- Chiudo il list-item -->  
            <li>
                <a href="#">Prodotti</a> <!-- primo list-item, prima voce del menu -->
                <ul> <!-- Lista annidata: voci del sotto-menu -->
                <li><a href="#">Creazione</a></li>
                <li><a href="#">Modifica</a></li>
                <li><a href="#">Cancella</a></li>
        
                
                </ul> <!-- Fine del sotto-menu -->
            </li> <!-- Chiudo il list-item -->  
            </div>
            <div class="navbar__actions">
                <div class="navbar__actions-item">
                    <button>Sign in</button>
                </div>
                <div class="navbar__actions-item">
                    <button>Request Demo</button>
                </div>
            </div>
        </div>
    </nav>

    <header>
        <div class="hero">
            <h1>Your Groceries, Your Way</h1>
            <p>Revolutionize your shopping experience with our easy-to-use supermarket app.</p>
            <button>Download Now</button>
        </div>
    </header>

    <main>
        <section class="hero">
            <h2>Benvenuto nel tuo supermercato online!</h2>
            <p>Trovata tutto ciò che cerchi, comodamente da casa tua.</p>
        </section>

        <section class="products">
            <h2>I nostri prodotti</h2>
            <div class="product-container">
                </div>
        </section>
        
    </main>

   <footer>
        <p>&copy; 2024 Il Mio Supermercato Online. Tutti i diritti riservati.</p>
    </footer>

    <script src="script.js"></script> </body>   
</body>
</html>
ed il foglio di stile associato:
codice:
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}
nav .navbar__container .navbar__logo img {
    height: 32px;
    width: 32px;
}
div#hormenu {
width: 100%;
float: left;
margin: 0;
padding: 0;
border-top: 1px solid black;
background: #0f1d2d;

}
div#hormenu ul{
    margin: 0;
     padding: 0;
     list-style-type: none;
}
div#hormenu li
{
width:100px;
float:left;
margin: 0;
padding: 0;
border-right: 1px solid black;
color:white;
}
div#hormenu a
{
display: block;
padding: 5px;
color: black;
text-decoration: none;
}
div#hormenu a:hover
{
background-color: #000033;
color: blue;
text-decoration: none;
}
div#hormenu li ul
{
display: none
}
div#hormenu li:hover ul
{
display: block;
position: absolute;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid black;
background: white;
}

Quello che vorrei fare é creare un menù a tendina con le varie voci.
Ringrazio chiunque voglia aiutarmi.
tulipan