Scroll fixed div for menu

Question

I have a problem for my web app. My menu ( android design ) not scroll if my explorer windows size it's small.

exemple image:

Normal screen size

Problem with low screen size

I try use overflow in css but not work...

My HTML:

<nav>
  <div class="titre"><img class="l_menu_general" src="icons/ic_menu_black.png" alt="menu" style="width: 24px; height: 24px;" /></div>
  <div id="nav_menu">
    <div class="menu">
      <div class="l_menu">Accueil</div>
      <div class="l_menu l_notes">Notes</div>
      <div class="l_menu">Camera</div>
    </div>
    <div class="menu">
      <div class="l_menu">A propos</div>
    </div>
  </div>
</nav>

My CSS :

nav {
  position:fixed;
  font-weight: 500;
  font-size: 16px;
  background: #fff;
  box-shadow: 2px 0px 3px 0px rgba(0,0,0, .1);
  left: -82%;
  top: 0;
  box-sizing: border-box;
  z-index: 20;
  height: 100%;
  width: 80%;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

/* Pour écran large */
@media only screen and (min-width: 768px) {
  nav{
    width:500px;
    left: -510px;
  }
}

div.menu {
  border-top: 1px solid #ccc;
  padding-top: 8px;
  padding-bottom: 8px;
}

nav div.titre {
  display: block;
  padding-left: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
/* Pour écran large */
@media only screen and (min-width: 768px) {
  nav div.titre{
    padding-left: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.menu div.l_menu {
  display: block;
  padding: 16px;
}

.menu div.l_menu:hover {
  cursor: pointer;
  background: #c5cae9;
}

Tanks for reply and sorry for my bad english.

Answer 1

try to add this in your css :

#nav_menu {
 overflow:scroll;
}