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<span class="antes"></span><ul id="morada">
<li>um</li>
<li>dois</li>
<li>tres</li>
<li>quatro</li>
</ul></li>
<li class="aver pra"><span class="antes">Clicar</span><ul id="morada">
<li>um</li>
<li>dois</li>
<li>tres</li>
<li>quatro</li>
</ul></li>
<li class="aver pra">Clicar<span class="antes"></span><ul id="morada">
<li>um</li>
<li>dois</li>
<li>tres</li>
<li>quatro</li>
</ul></li>
</ul></li>
</ul>

CSS

#morada{
  display:none;
}
#morada li{
  z-index:9999;
}
li.aver {
	display:block;
  position:relative;
  transform:rotate(0deg)
	width:10px;
	height:10px;
	top: 20px;
	left: 50px;
	font-weight: 500;
}/*
li.aver:hover li.aver::after {
	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;
}*/
.antes {
  background:url("https://ocomputador.pt/img/seta.jpg")no-repeat;
  background-size:20px;
     display:block;
     position:relative;
     float:right;
     margin-left:50px;
     top:-20px;
     width:100px;
     height:25px;
     transform:rotate(0deg);
     cursor:pointer;
}

.depois {
     background:url("https://ocomputador.pt/img/seta.jpg")no-repeat;
  background-size:80%;
     display:block;
     position:relative;
     left:45px;
     top:10px;
     width:25px;
     height:25px;
     transform:rotate(180deg);
     cursor:pointer;
}

JavaScript

$('#nav-list li').on('click', function() {
  $('#nav-list li').not(this).find('ul').hide();
  $(this).find('ul').toggle();
});
$('li span').click(function() {
    $(this).toggleClass('depois antes')
});