I'm having an issue with a dropdown menu on hover that slides down and then back up. The active list item serves as the title of the dropdown. When a user clicks on an <li>, it becomes active and receives the class active-markup-style which sets it to display:block. Everything works fine, except that when a user clicks on a list item, it removes the active-markup-style class from the previously active <li>, causing it to disappear with display:none. How can I ensure that the previously active <li> remains active until the dropdown is closed?
$('#dropdown-content').hover(
function(){
$(this).children().slideDown(200);
},
function(){
$(this).children().slideUp(0);
});
$('.markup-btn').click(function () {
$(this).addClass('active-markup-style');
$('.markup-btn').not($(this)).removeClass('active-markup-style');
});ul#dropdown-content {
display:inline-block;
}
.markup-btn {
display:none;
}
li.active-markup-style {
display:block !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dropdown-content">
<li id="markup1" class="markup-btn active-markup-style">Original</li>
<li id="markup2" class="markup-btn">Markup</li>
<li id="markup3" class="markup-btn">Final</li>
</ul>