<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div class="menu-wrap">
  <div class="menu-sidebar">
    <ul class="menu">
      <li class="menu-item-has-children"><a href="#">Click The Arrow</a>
        <span class="sidebar-menu-arrow"></span>
        <ul class="sub-menu">
          <li><a href="#">Alignment</a></li>
          <li><a href="#">Markup</a></li>
          <li><a href="#">Comments</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

body {
  background-color: #6968AB;
  font-family: 'Montserrat', Arial, serif;
}
a {
  text-decoration: none;
}
ul {
  padding-left: 0;
}
li {
  list-style: none;
}
.menu-wrap {
  width: 220px;
  margin: 0 auto;
}
.menu-sidebar li {
  padding: 18px 22px 0;
  font-size: 14px;
  font-weight: bold;
}
.menu-sidebar li > a {
  color: #f3f3f3;
  font-size: 1.18em;
  position: relative;
}
.menu-sidebar li > a:after {
  content: "";
  display: block;
  height: 0.15em;
  position: absolute;
  top: 100%;
  width: 100%;
  left: 50%;
  transform: translate(-50%);
  background-image: linear-gradient(to right, transparent 50.5%, #FFFA3B 50.5%);
  transition: background-position .2s .1s ease-out;
  background-size: 200% auto;
}
.menu-sidebar li > a:hover:after {
  background-position: -100% 0;
}
.menu-sidebar .menu-item-has-children {
  position: relative;
}
.menu-sidebar .menu-item-has-children .sub-menu {
  display: none;
}
.sidebar-menu-arrow:after {
  content: "\f107";
  font-family: 'FontAwesome';
  padding: 5px;
  color: #FFFA3B;
  position: relative;
}
.sidebar-menu-arrow:hover:after {
  cursor: pointer;
  color: #fff;
}
.sidebar-menu-arrow:active:after {
  top: 2px;
}

$(document).ready(function() {

  var $sidebarArrow = $('.sidebar-menu-arrow');

  // Sidebar navigation arrows

  $sidebarArrow.click(function() {
    $(this).next().slideToggle(300);
  });

});