title: How to make this css based menu open and close on click instead of open on hover and close on mouseout?
body: <p>The working version of the css menu is here <a href="http://jsfiddle.net/nexU/PEvrW/1/" rel="nofollow">http://jsfiddle.net/nexU/PEvrW/1/</a> and it works on all browsers and after changing hover to click, menu has to continue working on all browsers too.</p>
  
  <p>Complete menu markup on jsfiddle</p>
  
  <pre><code>.menu ul li a:hover {background:#fff; color:#000;}
  </code></pre>
  
  <p>As you can see all I need is to make the menu open on click, and close on click, so that when user selects a tab by one click, the tab remains open unless another tab is selected by click, or the same tab is reclicked to close it.. I already tried JQuery, but could not get it to work, and looked another posts but the tips did not work either. In other words menu has to work like this bootstrap menu which is activated on clicks: <a href="http://twitter.github.io/bootstrap/components.html#buttonDropdowns" rel="nofollow">http://twitter.github.io/bootstrap/components.html#buttonDropdowns</a></p>
  
  <p>Thanks in advance for your help.</p>