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é
