CSS Drop Down Menu - Stays HOVER state when clicked

Question

i have a CSS Drop Down Menu...

what i am doing with this in a certain portion of my website is that i am using its links to call AJAX-jQuery to change the contents of a DIV on the page without 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-->

well normally when we click the Drop Down Menu... we navigate to another Page but since i am not switching to another page...

what happens is when i click a menu item it performs the JS but doesn't collapses, that is, it stays in the HOVER STATE

following is an screen-shot after a click

which is logical because the cursor is still there and when i will move the cursor OUT it will go back to collapse state but i want to change its behavior such that when i click it collapses...

ONE WAY is that when i click and the #myDIV is loaded with the required div... i load the Drop Down Menu Layer with itself (reload it)...

BUT i am looking for an alternative

so my question in simple words

• Make CSS Drop Down Menu collapse when clicked

Answer 1

You can use .focus function to set focus to other location so that browser removes your hover. Something like:

document.getElementById("body").focus()

If you use jquery:

$("#element_id").focus();