CODEWITHSUNDEEP
javascriptcss
Martin Smellworse
Martin Smellworse

Reputation: 1762

How to hide this dropdownmenu on mouseout

I have a dropdownmenu working as shown on jsfiddle example here

How can I get the dropdownmenu to be hidden on mouseout? I have added:

onmouseout="hidediv()";

to the div that contains the drop down menu - but, when you click the link that makes the drop down menu appear - as you move your mouse over the drop down menu it disappears - sometimes. Other times it hangs around as you mouseover the first item in the list, but when you move over the second item in the list - the menu disappears. I don't understand as the mouseout should apply to the whole div.

Upvotes: 2

Views: 1503

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

Change onmouseout to onmouseleave.

From MDN:

Similar to mouseout, [mouseleave] differs in that it doesn't bubble and that it isn't sent until the pointer has moved from its physical space and the one of all its descendants.

Fiddle

Upvotes: 1

herrbischoff
herrbischoff

Reputation: 3326

You have two completely independent elements for the menu and the button. Make the menu list ul#dvMenu a sub-item of the ul under #navcontainer, like this:

<ul>
  <li></li>
  <li></li>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

BTW, you don't need to have a surrounding div, you can apply all those styles directly to the unordered list. This way you won't leave the context of the element, hence avoiding the unintended hide. Also, bind onmouseout="hidemenu();" to the main <ul>.

Upvotes: 0

Related Questions