OnMouseOut event occurs when I move of content of <div>, not offthe <div>

I'm not sure if this problem is due to my incomplete understanding of CSS or
a javascript feature. Hopefully this is clear.

I'm trying to build a lightweight DHTML menu system using a simple
javascript Show/Hide function (Dreamweavers built in function) to show or
reveal layers.

The problem appears to be that the onMouseOut() trigger occurs when the
mouse exits the CONTENT of the <div> layer, not when it exits the actual
<div>

The CSS for the layer is below:

#accident_nav {
position:absolute;
width:740px;
height:20px;
color:#453671;
background:#eaeaea;
visibility: hidden;
z-index: 101;
}

I've tried putting various content into the <div> </div> itself.

If I place a single image in it, then the mouse is always over part of the
image, so the onMouseOut() isn't called until it moves of the image.

If I place a list in the layer, then as soon as the mouse leaves the
boundary of a <li> box then it triggers the OnMoueout. I don't seem to be
able to collapse the individual <li> elements so there are no gaps between
them.

If I place a <table> in the layer, then even if I set table borders and
padding to 0px there still seems to be something the OnMouseOut() triggers
on.

Any clues on how I can make the OnMouseOut() event trigger happen on moving
the mouse out of the layer boundaries, not the layer contents?

On 25/9/05 11:07, in article BF5C356E.AFDC1%bingbong (AT) spamcop (DOT) net, "Bonge
Boo!" <bingbong (AT) spamcop (DOT) net> wrote:

Any clues on how I can make the OnMouseOut() event trigger happen on moving
the mouse out of the layer boundaries, not the layer contents?

http://www.quirksmode.org/js/events_...html#mouseover

Looks like its a know problem and I need to replace or edit the show-hide
layer functions I use.