Listers..

I'm working on a toolbar and trying to make it function similarly to the
one at Microsoft.com, the one with top level items as
Microsoft Home, MSN Home, Subscribe, Manage Your Profile.

This is an intranet environment, and It's all IE5.0 and above.
I have looked at the javascript code that MS uses and it provides a lot
more functionality than I need, so I'm working on my own version to make
sur ei understand it all.  I'm so close except I'm having trouble
getting the onMouseOut event to fire consistently.

This is how far I have got.

When the mouse moves over the navigation bar, I change the visibility
style of a DIV tag that contains a table of menu-items.  When the mouse
moves away from the text in the navigation bar in any direction except
downwards, the DIV is hidden.  When the mouse moves downwards (I check
this by comparing the mouse's X and Y position with the top, left,
bottom, and right position of the navigation bar element and if the
mouse is moving down then I do a event.cancelBubble), the DIV is not
hidden and the user can move the mouse over the menu items and click to
surf to the relevant page.

My problem comes when the user moves the mouse beyond the bottom of the
DIV.  if the mouse is moved at a leisurely pace the onMouseOut event
fires for the DIV and I hide it, but if the mouse is moved very fast
then the event never fires I know this because I am popping up an alert
box and it works at slow speeds.  I have a partial solution which is to
set the padding-bottom property of the div equal to 20 which gives a
larger element area to capture the event.  But still I can move the
mouse fast enough so the event is not fired.

Any ideas?

Thanks
Phil