I have implemented a CSS Drop Down Menu on my website. In a specific section of the site, I am using the menu links to trigger AJAX-jQuery calls that dynamically change the content of a DIV without the need for page reloading.
<script type="text/javascript">
function load_editor(id)
{
$('#myDIV').load('editor.php?id=' + id);
}
</script>
<div class="mainmenu">
<ul>
<li class="li_nc"><a href="javascript:load_editor('1')">Home</a></li>
<li class="li_hc"><a href="#" >Programs</a><ul class="ul_ch">
<li class="li_hc"><a href="#" >Engineering</a><ul class="ul_ch">
<li class="li_nc"><a href="javascript:load_editor('2')" >BEE ( Electronics 4 Years )</a></li>
<li class="li_nc"><a href="javascript:load_editor('3')" >BEE ( Tele Comm. 4 Years )</a></li>
<!--and the following code is the usual CSS Drop Down Menu Code-->
Usually, when clicking on a Drop Down Menu item, it navigates to another page. However, in this case, since there is no page switch involved, the menu stays in its hover state after triggering the JavaScript code.
After the click, the menu remains expanded, which is expected behavior given that the cursor is still hovering over it. My goal is to make the menu collapse when clicked, instead of staying open.
An option could be to reload the Drop Down Menu layer along with the required div content when a menu item is clicked. However, I am exploring alternative solutions.
In essence, my question is:
- How can I make the CSS Drop Down Menu collapse when clicked?