Barre de scroll vertical apparaît

Bonjour,
Avant toute chose bravo pour ce super forum !

Je débute en web et je rencontre un problème inréglable pour moi. J'ai un menu avec quatre boutons horizontaux alignés. L'un d'entre eux possède un sous menu avec deux liens (construit avec une sous-liste). Mon menu étant en footer, j'ai essayé de ruser pour placer le sous menu au dessus du bouton avec un "top: -13em;". Cependant, une barre de scroll vertical apparaît, comme si mon sous-menu était encore en bas et allongeait donc la page. Je n'arrive pas à dire à mon code d'ignorer en quelque sorte cet espace.. Je précise que mon footer n'est pas trop grand, il fait la bonne taille et est fixé en bas de page.

Voici la partie html du menu :

    <nav>
    <footer>
        <div onclick="window.location.href='./Pages_libres/3_inscription.html'"><i id="arrow_left"></i></div>
        <ul class="niveau1">
        <li><button class="menu" onclick="window.location.href='./accueil.html'">Accueil</button></li>
        <li><button class="menu" onclick="window.location.href='./Page_imposée/Livre_Petit/livre_v2.xhtml'">Partie imposée</button></li>
        <li><button class="menu" id="presentation" onclick="window.location.href='./Pages_libres/1_presentation.html'">Présentation</button><ul class="sous_menu"><li><a href="./Pages_libres/la_mission.html">La mission</a></li><li><a href="./Pages_libres/videos.html">Vidéos</a></li></ul></li>
        <li><button class="menu" onclick="window.location.href='./Pages_libres/2_galerie.html'">Galerie</button></li>
        <li><button class="menu" onclick="window.location.href='./Pages_libres/3_inscription.html'">Inscription</button></li>
        </ul>
        <div onclick="window.location.href='./Page_imposée/Livre_Petit/livre_v2.xhtml'"><i id="arrow"></i></div>
    </footer>
    </nav>

Et la partie CSS (désolé c 'est le bazar un peu) :

_header {background-color: #505359}
_section {background-color: green;}
_footer {background-color: black;}

html:hover{cursor: default}

/*Idée couleur : #061630  */

@keyframes fadeIn {
  0%{
    opacity: 0.4;
  }
  100%{
    opacity: 1;
  }
}

body {
  display: flex;
  flex-direction: column;
  overflow: auto;
  animation: fadeIn 4s ease;
}

/* Header */

header {
  display: flex;
  justify-content: center;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 1.1em;
  font-style: italic;
  padding: 0.5em;
  color: white;
}

div>a>img {
  height: 40px;
  position: absolute;
  left: 1600px;
  padding: 0px 30px;
  top: 5px;
}

/*Section*/

#video {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-content: space-around;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 1.3em;
  height: 15em;
  color: white;
  margin-top: 5em;
}

a {
  color: white;
}

.accueil {
  display: flex;
  justify-content: center;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 2em;
  color: white;
}

.accueil_subtitle {
  display: flex;
  justify-content: center;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 1.5em;
  color: white;
}

/*Footer*/

footer {
  display: flex;
  height: 10em;
  margin-top: 15em;
}

.niveau1 {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  width: 100%;
}

.menu {
  margin: 2em;
  color: white;
  background-color: transparent;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 1.5em;
  cursor: pointer;
  transition: 0.6s;
  border-style: solid;
  border-color: white;
  height: 3em;
  width: 8em;
}

.sous_menu {
    color: white;
    position: relative;
    top: -13em;
    list-style-image: url(../Images/icon.png);
}

.sous_menu>li>a {
    text-decoration: none;
}

.sous_menu_liste {
    list-style-type: none;
    list-style-image: url(../Images/icon.png);
}

#arrow {
  height: 2em;
  width: 2em;
  margin: 60px;
  transition: 0.6s;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  cursor: pointer;
  border: solid white;
  border-width: 0 3px 3px 0px;
  display: flex;
  padding: 3px;
}
#arrow_left {

  height: 2em;
  width: 2em;
  margin: 60px;
  transition: 0.6s;
  transform: rotate(45deg);
  -webkit-transform: rotate(133deg);
  cursor: pointer;
  border: solid white;
  border-width: 0 3px 3px 0px;
  display: flex;
  padding: 3px;
}

#arrow:hover {opacity: 1;height: 3em;width: 3em;margin: 55px}
#arrow_left:hover {opacity: 1;height: 3em;width: 3em;margin: 55px}

@media only screen and (min-width: 1601px) {
    .menu:hover {background-color: #232323;height: 3.5em;width: 8.5em;margin: 35px;}
    .sous_menu>li:hover {font-size: 1.2em;transition: 1s;}
    .sous_menu>li{margin: 0.5em;}
}

@media only screen and (max-width: 1600px) {
    .menu {
        margin: 0.3em;
    }
    .menu:hover {background-color: #232323;height: 3.1em;width: 8.1em;}
    .sous_menu>li:hover {font-size: 1.2em;transition: 1s;}
    .sous_menu>li{margin: 0.5em;}
    .sous_menu {top: 0em;}
    footer {
        margin-top: 0em;
    }
}

@media only screen and (max-width: 1020px) {
    .sous_menu {
        top: 0em;
    }
    .sous_menu>li:hover{font-size:1.1em;transition: 1s;}
    .sous_menu>li{margin: 0em;}
}

Si vous pouvez m'aider... Merci d'avance et bonne soirée !
Modifié par Hadrons (07 Dec 2018 - 21:08)