Bonjour j'aimerai que quelqu'un me dise comment peux t'on scroll dans un sous-menu, car j'ai beaucoup de liens à mettre.
html:
<ul id="liste">
<li id="items">
<p id="txt-liste">Plus...</p>
<ul id="sous-liste">
<li id="titre-sous-liste"><a href="https://fr.wikipedia.org/wiki/Tableau_p%C3%A9riodique_des_%C3%A9l%C3%A9ments">Le tableau périodique</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tal_alcalin">Les métaux alcalins</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tal_alcalino-terreux">Les métaux alcalino-terreux</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Lanthanide">Les lanthanides</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Actinide">Les actinides</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tal_de_transition">Les métaux de transition</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tal_pauvre">Les métaux pauvres</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tallo%C3%AFde">Les métalloïdes</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Non-m%C3%A9tal">Les non-métaux</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Halog%C3%A8ne">Les halogènes</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Gaz_noble">Les gaz nobles</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tallo%C3%AFde">Les inconnus</a></li>
<li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Superactinide">Les superactinides</a></li>
</ul>
</li>
</ul>
css:
*, ::before, ::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#items {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#items:nth-child(1) {
height: 60px;
}
#sous-liste a {
text-decoration: none;
color: #f1f1f1;
}
/* sous liste */
#sous-liste {
position: fixed;
height: 100vh;
width: 200px;
top: 60px;
right: 0;
background: rgb(37,37,37);
list-style-type: none;
padding: 20px;
border-left: 10px solid #222;
border-right: 10px solid #222;
display: none;
}
#titre-sous-liste {
text-align: center;
font-size: 20px;
padding-bottom: 0;
font-family: 'Poppins', sans-serif;
}
.liste-items {
font-size: 13px;
margin: 0 0;
padding: 5px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
#items:hover > ul {
display: block;
}
Mon site :
Merci beaucoup d'avance !
