Menu qui ne défile pas jusqu'en bas

Ça fait quelques années que je ne m'amuse plus à faire des sites web et je ne me souviens pas de grand chose (j'ai arrêté à cause d'une maladie neurologique dégénérative et ma dose de médicaments affecte ma mémoire).
Bref, à cause de cette maladie, il faut que je vende toutes mes BD en bloc. J'ai cherché sur le web un modèle de menu. J'en ai trouvé un qui me convenait, mais je me suis rendu compte que sur mon macBook ou mon iPad, quand il y a beaucoup d'éléments, je ne peux pas faire défiler jusqu'en bas (la colonne A-C ou ExDé par exemple) Quelqu'un aurait une solution?
ps oui, je sais, mes images sont trop grosses, mais dans le courriel que j'enverrai à des librairies spécialisées, je leur dirai qu'il y a un délai de chargement - faut que ce soit assez gros pour qu'ils regardent en détail l'état des BD). Je vais regarder sur internet pour voir si le chargement peut s'accélérer.
robinlavoie.com

Voici le code pour le menu:

<nav>
            <ul>
               <li class="menu-deroulant">
                  <a href="#">A-C</a>
                  <ul class="sous-menu">
                     <li><a href="#marini">Aigles de Rome (Les)</a></li>
                     <li><a href="#leo">Aldebaran</a></li>
                     <li><a href="#alpha">Alpha</a></li>
                 </ul>
               </li>
               <li class="menu-deroulant">
                  <a href="#">D-G</a>
                  <ul class="sous-menu">
                     <li><a href="#dallas_barr">Dallas Barr</a></li>
                     <li><a href="#dan_cooper">Dan Cooper</a></li>
                     <li><a href="#dantes">Dantes</a></li>
               </ul>
               </li>
         </nav>

et la CSS qui va avec:

/*Menu déroulant*/

:root{
  --hauteur-menu: 60px;
}
* {
  margin: 0px;
  padding: 0px;
  font-family: Montserrat, sans-serif;
}
nav {
  width: 100%;
  font-size: 17px;
  position: sticky;
  top: 0;
  z-index:2000;
}

nav > ul {
  display: flex;
  text-align: center;
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
  height: var(--hauteur-menu);
}
 
nav ul {
  list-style-type: none;
}

nav > ul > li {
  background-color: white;
  position: relative;
  height: 100%;
  flex: 1;
}

nav > ul > li > a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

li a {
  text-decoration: none;
  color: black;
}

.menu-deroulant > a:after{
  content: '?';
  font-size: 15px;
  margin-left: 7px;
  display: inline-block;
}
.sous-menu {
  margin-top: var(--hauteur-menu);
  width: 290%;
  text-align: left;
  background-color: white;
  border-radius: 2px;
  overflow: hidden;
  max-height: 0;
}

.sous-menu > li > a {
  height: 19px;
  padding-left: 20px;
  width: 100%;
  align-items: center;
  display: flex;
}

nav > ul > li:hover > a{
  color: #2169EC;
}

.sous-menu > li:hover {
  background-color: rgba(33, 105, 236, 0.3);
}

.sous-menu > li:hover > a {
  color: white;
}

@keyframes rotationFleche {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(90deg);
  }
}

.menu-deroulant:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
}

@keyframes apparitionSousMenu {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid #2169EC;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}

.menu-deroulant:hover > .sous-menu {
  animation: apparitionSousMenu 1s forwards;
}

Modifié par largowin (16 Feb 2023 - 00:56)