Al seleccionar el menú 1, aparece subrayado marcando que está seleccionado, pero al seleccionar el menú 2, sigue subrayando al menú 1.
Intenté que quede seleccionado cuando hago click en el menú 2 con css(.selected:before)
pero no entiendo qué pasa.
Este es el código donde se ve la diferencia si hacen click en un menú o en el otro.
$('ul.menu-lateral .sub-menu').hide(); //Ocultar hijos de forma predeterminada
$('ul.menu-lateral li a').click(function(){
$(this).siblings('.sub-menu').slideToggle('slow');
});
$('ul.menu-lateral > li').click(function(){
$('ul.menu-lateral > li').removeClass('selected');
$(this).addClass('selected');
});
ul {
list-style: none;
}
ul > li {
margin: 30px;
}
ul > li.selected:before {
content: '';
position: absolute;
left: 55px;
right: 0;
top: 45px;
margin: 3px;
height: 2px;
background: #F39323;
width: 100px;
}
ul > li > a {
text-decoration: none;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-menu" role="navigation">
<ul class="menu-lateral">
<li><a href="#"> MENU 1 </a>
<ul class="sub-menu">
<li><a href="#"> SUB MENU 1</a></li>
</ul>
</li>
<li><a href="#"> MENU 2 </a>
<ul class="sub-menu">
<li><a href="#">SUB MENU 2</a></li>
</ul>
</li>
</ul>
</div>
absolute
hace que la ubicación de un elemento sea relativo al elemento padre más cercano que tenga unposition: relative
. En tu caso no hay elementos con esa posición, por ende, el elemento:before
será relativo al body. Lo que puedes hacer es adoptar la solución que te han dado o ponerle unposition: relative
alli
y darle un top del alto delli
+ 10px para que quede la barra justo debajo de él. Mira éste ejemplo para que te veas el efecto.