CSS Drop Down Menu - Saves HOVER state when clicked

Question

I have a CSS drop down menu ...

what am I doing with this in a specific part of my site, I use its links to call AJAX-jQuery to change the contents of the 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-->

ok when we press the Drop Down Menu ... we go to another page, but since I do not go to another page ...

what happens when i click on a menu item that it executes JS but doesn't collapse, i.e. it stays in HOVER STATE

Below is a screenshot after clicking

which is logical because the cursor still exists, and when I move the OUT cursor , it will return to crash state, but I want to change its behavior so that it crashes when I click it.

ONE WAY - , #myDIV div... ( )...

• CSS Drop Down

Answer 1

, . - :

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

jquery:

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