Drop Down Menu -- Onmouseout Getting Invoked On The Child Node When Set In The Parent Node

Trying to mimic the browse catagories in the following link https://dev.twitter.com/discussions onmouseover -- the container expands to fit the new items within itself -- but,movi

Solution 1:

Sorry, I got my original answer completely wrong, I'm not sure what I was thinking. Of course, mouseout fires on a parent when the mouse moves to a child. In this case, you need to check the relatedTarget or toElement properties of the event object and check to see if that element is a descendant of the container.

You can check ancestry using contains() in Internet Explorer and compareDocumentPosition() in other browsers. For example, change onmouseout="unfire(event)" to onmouseout="unfire.call(this, event)" and add the following code to the unfire function:

var to = evt.relatedTarget || evt.toElement;

if((this.contains && this.contains(to)) || this.compareDocumentPosition(to) & 16)
    return;