There's a technique for hiding drop-down menu leaves where you:
o Display each leaf at, say, z-index 2.
o Display a large transparent GIF behind the whole DHTML menu structure
(i.e. at z-index 1).
Then, whenever the transparent GIF gets an onmouseover, you hide all the
drop-down menu leaves.
Note that you can't reliably use onmouseout to detect when the mouse moves
outside a dropdown menu leaf. This is because in a structure like:
<div>
<table>
<tr><td><a href="hither.htm">Hither</td></tr>
<tr><td><a href="yon.htm">Yon</td></tr>
</table>
</div>
the <div> gets :
o An onmouseover event when the mouse enters it, which is fine.
o An onmouseout event when the mouse moves outside it, which is fine.
o An onmouseout event when the mouse moves over the table, which is
*way* inconvenient.
Basically, when the table gets onmouseover, the div has to get onmouseout,
because the mouse can only be over one element at a time. Because of this,
you can't use the div's onmouseout to hide the div. You have to use
onmouseover on some element outside the div, such as a transparent gif
underlaying the whole menu.
Jim Buyens
Microsoft MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Windows SharePoint Services Inside Out
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------
