Menu đơn giản chưa chọn lọc

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,600);

.dropmenu {
  liste-style: none;
  padding: 0px;
  margin: 0px;
  display: inline-block;
  float: left;
}

.dropmenu > li {
  display: inline-block;
  width: 130px;
  position: relative;
}

.dropmenu li a {
  display: block;
  padding: 15px;
  text-align: center;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
  -webkit-transition: 0.3s all;
  transition:0.3s all;
}
.dropmenu li a:hover{
  opacity:0.9;
}
.dropmenu .sub-menu {
  list-style: none;
  padding: 0px;
  margin: 0px;
  text-align: center;
  position:absolute;
  right:0px;
  left:0px;
}

.dropmenu .sub-menu li a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.dropmenu .drop-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.dropmenu .drop-link i {
  float: right;
  padding: 3px;
}


/******************************/

.dropmenu .sub-menu li {
  height: 0px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}

.dropmenu .sub-menu li.noopen {
  height: 0px;
  opacity: 0;
  visibility: hidden;
}

.dropmenu .sub-menu li.open {
  height: 100%;
  opacity: 1;
  visibility: visible;
}


/**********************************/

#anim1 li a {
  background-color: #F34D4D;
}
#anim1 .sub-menu li.noopen {
  -webkit-transform: translate(-30px, 0px);
          transform: translate(-30px, 0px);
}
#anim1 .sub-menu li.open {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

#anim2 li a {
  background-color: #45AEE7;
}
#anim2 .sub-menu li.noopen {
  -webkit-transform: translate(0px, 50px);
          transform: translate(0px, 50px);
}
#anim2 .sub-menu li.open {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

#anim3 li a {
  background-color: #79CB3F;
}
#anim3 .sub-menu li.noopen {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
#anim3 .sub-menu li.open {
  -webkit-transform: scale(1);
          transform: scale(1);
}

#anim4 li a {
  background-color: #D45CF9;
}
#anim4 .sub-menu li.noopen {
  -webkit-transform: scale(0);
          transform: scale(0);
}
#anim4 .sub-menu li.open {
  -webkit-transform: scale(1);
          transform: scale(1);
}
</style>





<ul id="anim1" class="dropmenu">
  <li>
    <a href="#" class="drop-link">Menu<i class="fa fa-angle-down"></i></a>
    <ul class="sub-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </li>
</ul>

<ul id="anim2" class="dropmenu">
  <li>
    <a href="#" class="drop-link">Menu<i class="fa fa-angle-down"></i></a>
    <ul class="sub-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </li>
</ul>

<ul id="anim3" class="dropmenu">
  <li>
    <a href="#" class="drop-link">Menu<i class="fa fa-angle-down"></i></a>
    <ul class="sub-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </li>
</ul>

<ul id="anim4" class="dropmenu">
  <li>
    <a href="#" class="drop-link">Menu<i class="fa fa-angle-down"></i></a>
    <ul class="sub-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </li>
</ul>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>jQuery.fn.reverse = [].reverse;
$('.sub-menu').children('li').addClass('noopen');
$('.drop-link').on('click', function (e) {
    var dropLink = $(this);
    var parentLink = dropLink.parent();
    var subMenuLink = parentLink.children('.sub-menu').children('li');
    if (parentLink.hasClass('active')) {
        parentLink.removeClass('active');
        subMenuLink.reverse().each(function (i) {
            var $li = $(this);
            setTimeout(function () {
                $li.removeClass('open');
                $li.addClass('noopen');
            }, 100 * i);
        });
    } else {
        parentLink.addClass('active');
        subMenuLink.each(function (i) {
            var $li = $(this);
            setTimeout(function () {
                $li.removeClass('noopen');
                $li.addClass('open');
            }, 100 * i);
        });
    }
    return false;
});
//# sourceURL=pen.js
</script>