Bonsoir, je débute dans le html et css, et j'aimerais qu'on m'aide sur le menu déroulant que je n'arrive pas à créer :
fichier.html
"
<!DOCTYPE html>
<html>

<head>
    
    <meta charset="utf-8">
    <title>Pomme&co - Accueil</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon website" type="png"
    href="assets/icon-website.png">

</head>

<body>

    <ul id="nav" class="menu deroualnt">
        <li><a onclick="window.location.href='accueil.html'" href="#">Accueil</a></li>
        
        <li class="menu">Personnage
            <ul>
                <li><a onclick="window.location.href='pomme.html'" href="#">Pomme 🍎</a></li>
                <li><a onclick="window.location.href='fulltest.html'" href="#">Test</a></li>
            </ul>                
        </li>

        <li><a href="#">Test</a></li>
    </ul>
 
</body>

</html>
"

fichier.css
"
li {
list-style: none;
}
.sous_menu {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: .3;
background-color: lightgrey;
text-align: center;
width: 120px;
}
.sous_menu li {
padding: 10px;
}
sous_menu li:hover {
background-color: lightgrey;
}
.viewlist {
transform: scaleY(1);
}
"

fichier.js
"
let menu = document.querySelector(".menu")
let sous_menu = document.querySelector(".sous_menu")
menu.addEventListener("click", () => {
sous_menu.classList.toggle("viewlist")
})
"

Merci d'avance pour l'aide apporté