<nav id="fixed">
  <ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li class="has-sub"><a href="#">Menu 2 with sub &raquo;</a>
      <ul>
        <li><a href="#">Sub Menu</a></li>
        <li><a href="#">Sub Menu</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li class="has-sub"><a href="#">Menu 4 with Sub &raquo;</a>
      <ul>
        <li><a href="#">Sub Menu</a></li>
        <li><a href="#">Sub Menu</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 5</a></li>
  </ul>
</nav>
html, body {
	margin:0;
	padding:0;
	height:100%
}
#fixed {
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	width:300px;
	overflow:auto;
	background:#ccc;
}
.menu, .menu ul {
	margin:0;
	padding:0;
	list-style:none;
}
.menu li {
	position:relative;
	z-index:1;
}
.menu a {
	display:block;
	border-bottom:1px solid #fff;
	padding:5px 10px;
	color:#000;
	text-decoration:none;
	transition:all .3s ease;
}
.menu a:hover{background:#bbb}
.menu ul {
	position:relative;
	left:0;
	top:-100%;
	z-index:-1;
	max-height:0;
	width:0;
	overflow:hidden;
	background:#aaa;
	opacity:0;
	transition:all .3s ease;
}
.menu li.active > ul {
	top:0;
	z-index:2;
	opacity:1;
	width:100%;
	max-height:50em;
	width:100%;
	overflow:visible;
	transition:all .3s ease;
}
li.active > a{background:#bbb}
(function() {
  var menuitems = document.querySelectorAll('.has-sub');

  for (var i = 0, len = menuitems.length; i < len; i++) {
    var menuitem = menuitems[i];
    menuitem.addEventListener("click", tapOrClick, false);
    //menuitem.addEventListener("touchend", tapOrClick, false);  /* doesn't seem to be needed for touch */  

    function tapOrClick(event) {
      //handle tap or click.

      if (this.classList.contains('active')) {
        this.classList.remove('active');
      } else {
        /* forEach not working in safari
			    menuitems.forEach(function(element) {
                    element.classList.remove('active');
                });
				*/
        for (var ii = 0, len = menuitems.length; ii < len; ii++) {
          menuitems[ii].classList.remove('active');
        }

        this.classList.add('active');
      }
      event.preventDefault();
      return false;
    }
  }
}());
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.