title: CSS Drop Down Menu - Stays HOVER state when clicked
body: <p>i have a CSS Drop Down Menu... </p>
  
  <p>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...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function load_editor(id) 
  {
    $('#myDIV').load('editor.php?id=' + id);
  }
  &lt;/script&gt;
  
  &lt;div class="mainmenu"&gt;
  &lt;ul&gt;
    &lt;li class="li_nc"&gt;&lt;a href="javascript:load_editor('1')"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li class="li_hc"&gt;&lt;a href="#"  &gt;Programs&lt;/a&gt;&lt;ul class="ul_ch"&gt;
    &lt;li class="li_hc"&gt;&lt;a href="#"  &gt;Engineering&lt;/a&gt;&lt;ul class="ul_ch"&gt;
  
      &lt;li class="li_nc"&gt;&lt;a href="javascript:load_editor('2')"  &gt;BEE ( Electronics 4 Years )&lt;/a&gt;&lt;/li&gt;
      &lt;li class="li_nc"&gt;&lt;a href="javascript:load_editor('3')"  &gt;BEE ( Tele Comm. 4 Years )&lt;/a&gt;&lt;/li&gt;
      &lt;!--and the following code is the usual CSS Drop Down Menu Code--&gt;
  </code></pre>
  
  <p>well normally when we click the Drop Down Menu... we navigate to another Page but since i am not switching to another page... </p>
  
  <p>what happens is when i click a menu item it performs the JS but doesn't collapses, that is, it stays in the <strong>HOVER STATE</strong> </p>
  
  <p>following is an screen-shot after a click 
  <img src="https://i.stack.imgur.com/KZiQe.png" alt="alt text"></p>
  
  <p>which is logical because the cursor is still there and when i will move the cursor <strong>OUT</strong> it will go back to collapse state but i want to change its behavior such that when i click it collapses...</p>
  
  <p>ONE WAY is that when i click and the <code>#myDIV</code> is loaded with the required div... i load the Drop Down Menu Layer with itself (reload it)...</p>
  
  <p>BUT i am looking for an alternative</p>
  
  <p>so my question in simple words </p>
  
  <ul>
  <li>Make CSS Drop Down Menu collapse when clicked</li>
  </ul>