JQuery hover & dropdown menus

I'm having some trouble with my website's dropdown menu using JQuery.

Basically, what I want to achieve is a simple horizontal dropdown menu with JQuery's hover (in Drupal's DHTML menu module). However, there are some annoyances that I could not fix.

So the main 开发者_运维知识库menu and their child <li>s are all links. When I click one of the child menu, everything is fine (I got directed to the destination, menu resets to normal unhovered state). But when I click the parent menu, after arriving at the destination, even though the dropdown menu resets back the mouse is still hovering above the link. This results in the dropdown being activated briefly again as I move my mouse away.

What I want is that the dropdown activates only when the mouse enters the element, not when it exits. I've tried separating .hover() into .mouseenter() and .mouseleave(), but this instead results in the dropdown not working at all. Help!

My code is below:

 $(li).hover(function(e) {
   Drupal.dhtmlMenu.expandMenu($(li));
 },
 function(e) {
   Drupal.dhtmlMenu.collapseMenu($(li));
 });

 $(li).ready(function(e) {
   Drupal.dhtmlMenu.collapseMenu($(li));
 });

Use the Nice Menus module. It will save you from this headache. I've been using it ever since I started with Drupal 3 years ago.

Absolutely no need to use JavaScript for a simple dropdown menu. See http://webdesignerwall.com/tutorials/css3-dropdown-menu (CSS3 is used but the basic CSS will work in all browsers). Do it purely in CSS/HTML