<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);
	});

});