title: How can I handle hover on mobile devices like iPad?
body: <p>I am new to web development and now i am faced with this problem of handling hover on devices like ipad. First i thought of removing css for <code>hover</code> and making it on click but, customer is insisting on having hover. </p>
  
  <p>Heres the problem, I have bootstrap navbar with few menus that dropdown on hover.
  But on ipad the menu drops down after clicking on the menu (ex: learn) but doesnt disappear until i click on another navigation menu say "teach". </p>
  
  <p>I want to do following things using javascript/jquery.</p>
  
  <ol>
  <li><p>Keep existing hover behavior on desktop and laptop</p></li>
  <li><p>On devices like iPad, i would like the menu to disappear under following     circumstances<br>
  (a) when clicked on the same menu item again<br>
  (b) When clicked on submenu<br>
  (c) When clicked outside the menu</p></li>
  </ol>
  
  <p>Any sort of help here is appreciated. </p>
  
  <p>Here is the fiddle <a href="http://jsfiddle.net/em656522/2/" rel="nofollow">http://jsfiddle.net/em656522/2/</a></p>