Scroll dans un sous-menu

[sashouu]

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 !