attachevent to drop down

[FiRe]

I have a menu system that looks like this:

<ul id="mainmenu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a>
<ul>
<li><a href="">Company</a></li>
<li><a href="">Staff</a></li>
</ul>
</li>
<li><a href="">Services</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Offline</a></li>
<li><a href="">Enquiries</a></li>
</ul>
</li>
<li><a href="">Contact Us</a></li>
</ul>

I need to do something when you move your mouse out of the <ul> under 'About Us' or 'Services'.

I am not familiar with attach events in javascript, I need some code that monitors the onmouseout for any of these sub-menus. Any ideas?

[whoisgregg]

Are you using any javascript framework like Prototype, jQuery, or YUI currently, FiRe? Attaching events are a breeze with any of those.

Without them, you have to do some branching depending on browser, but here's the basic Firefox approach:

function outUl(){
alert(this);
}
element = document.getElementById('mainmenu');
element.addEventListener('mouseout', outUl,false);

In the code above, the function is attached to the entire UL, you can either assign unique id's to each sub <ul> that you want the event to fire on, or you can loop through the ul#mainmenu and look for child <ul> elements to attach the event to.

See if that code works for you first though and post back with your progress. Then we can troubleshoot from there. :)