I have a condensed menu construction that unfortunately cannot be changed in HTML, only CSS and JS modifications are possible!
$('span').on("hover", handleHover('span'));
function handleHover(e) {
$(e).on({
mouseenter: function() {
$(this).addClass('selecc');
$(this).next("ul").show();
},
mouseleave: function() {
$(this).removeClass('selecc');
$(this).next("ul").hide();
}
});
}span {
display:block;
}
ul {
background-color:#CCC;
color:#000;
display:none;
margin:0;
}
.selecc {
background-color:Red;
color:#FFF
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span>Option 1</span>
<ul>
<li>suboption 1-1</li>
<li>suboption 1-2</li>
<li>suboption 1-3</li>
</ul>
<span>Option 2</span>
<ul>
<li>suboption 2-1</li>
<li>suboption 2-2</li>
<li>suboption 2-3</li>
</ul>I am facing an issue where the menu collapses every time I move my mouse over the suboptions. Unfortunately, I cannot figure out how to inform jQuery that the UL is part of the menu group. Any ideas on how I can solve this problem?