menu com after

by dragon4win

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-list">
<li class="aver pra">Clicar<ul>
<div id="morada">
<li>um</li>
<li>dois</li>
<li>tres</li>
<li>quatro</li>
</div></ul></li>
<li class="aver pra">Clicar<ul>
<div id="morada">
<li>um</li>
<li>dois</li>
<li>tres</li>
<li>quatro</li>
</div></ul></li>
<li class="aver pra">Clicar<ul>
<div id="morada">
<li>um</li>
<li>dois</li>
<li>tres</li>
<li>quatro</li>
</div></ul></li>
</ul>

CSS

#morada{
  display:none;
}
#morada li{
  z-index:9999;
}
li.aver::before {
	content:"\2227";
	display:block;
  position:relative;
	transform:rotate(180deg);
	width:10px;
	height:10px;
	top: 20px;
	left: 50px;
	font-weight: 500;
}
li.aver:hover ul li::before {
	content:"\2227";
  display:block;
  position:relative;
  transform:rotate(0deg);
  background:white;
  width:20px;
	height:20px;
	top: 0px;
	left: 50px;
	font-weight: 500;
  z-index:9999;
}

JavaScript

$('#nav-list li').on('click', function() {
  $('#nav-list li').not(this).find('div').hide();
  $(this).find('div').toggle();
});