I am currently utilizing jquery to implement a dropdown submenu on hover action.
Here is the structure of the code:
<div id="menucontainer">
<ul id = "topmenu">
<li><a onmouseover="javascript:show('div_1');">menu_1</a></li>
<li><a onmouseover="javascript:show('div_2');">menu_2</a></li>
<li><a onmouseover="javascript:show('div_3');">menu_3</a></li> # using onmouseover since generated from templates
</ul>
<div id="div_1" class="submenu">
<ul>
<li> submenu_1 </li>
<li> submenu_2 </li>
<li> submenu_3 </li>
</ul>
</div>
<div id="div_3" class="submenu">
<ul>
<li> submenu_1 </li>
<li> submenu_2 </li>
<li> submenu_3 </li>
</ul>
</div>
<div id="div_3" class="submenu">
<ul>
<li> submenu_1 </li>
<li> submenu_2 </li>
<li> submenu_3 </li>
</ul>
</div>
</div>
<style>
#topmenu {
list-style: none;
}
#topmenu > li {
display: inline-block;
}
.submenu {
display: none;
}
<script>
function show(divid) {
$('.submenu').css('display', 'none');
$('#'+divid).css('display', 'block');
}
</script>
An issue arises when show(div) function is triggered and the submenu div appears, there is another div positioned after "menucontainer" that obstructs clicks on the displayed div. How can this problem be resolved?