Header auto rétractable

Bonjour,

J'ai construit mes pages XHTML avec l'architecture suivante :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div id="header"> </div> <div id="menusbar"> <ul> <li>...</li> <li>...</li> ... </ul> </div> <div id="main"> ... </div> <div id="footer"> ... </div>

---

l'élèment menusbar occupe toute la largeur de l'écran et l'élément ul s'affiche dans le sens de la largeur et représente un menu du même genre que celui de developpez.com

j'ai écrit des fonctions javascript pour rétracter ou rendre visible le header
Ces fonctions sont appelées sur les évènements du menusbar :

Code:

---

<div id="menusbar" onmouseover="ShowHeader();" onmouseout="HideHeader();">

---

Ci dessous le code grossier du rétract :

Code:

---

1 2 3 4 5 6 7 8 9 10

function HideHeader() { if(header.offsetTop + header.offsetHeight > 0) { header.style.marginTop = header.offsetTop - 1; timerHeader = setTimeout("HideHeader()", 20); } else clearTimeout(timerHeader); }

---

Je souhaite que ShowHeader et HideHeader ne soient pas appelées lorsque l'utilisateur clique sur une menu (l'élément ul) et que donc ces fonctions ne soient appelées que lorsque la souris se trouve sur le div menusbar non recouvert par le ul?
Comment faire?

Merci pour votre aide