Creation d'un menu : Probleme surprenant

gd1024 -  
 gd1024 -
Bonjour,
j'essaye de faire un menu en cascade en utilisant les fonctions onMouseOver et onMouseOut. Pour l'affichage des sous menu je n'ai aucun probleme par contre l'effacement ne marche qu'une fois de temps en temps, de facon completement aleatoire
Si quelqu'un pouvait me venir en aide, parce que la je n'ai pas trop d'idée . Merci


Voici mon code :
je donne un id à chaque sous menu et j'utilise les fonctions switch_menus et hide-menu pour afficher ou effacer un sous-menu en fonction de son id


<html>
<head>
<title>Menu</title>
<script language="JavaScript" type="text/javascript" >
       function switch_menus(itemID,nbMenus)
       {
              var item;
              for (var i=0;i<nbMenus;i++)
               {
                     item = document.getElementById(i);
                     item.style.display="none";
              }
              item = document.getElementById(itemID);
              item.style.display='';
       }

       function hide_menus(itemID)
       {
              var item;
              item = document.getElementById(itemID);
              item.style.display="none";
       }
</script>
</head>

<body>
       <table bgcolor="pink" width="148" border="1" cellspacing="0" cellpadding="0">
              <tr>
                     <th id="topsubjectbar" align="center">Menu</th>
              </tr>
              <tr>
                     <td onMouseOver='switch_menus(0,2)' onMouseOut='javascript:hide_menus(0)'><a href='#' tabindex='2'>menu 1</a>
                     </td>
              </tr>
              <tr>
                     <td onMouseOver='switch_menus(1,2)' onMouseOut='javascript:hide_menus(1)'><a href='#' tabindex='2'>menu 2</a>
                     </td>
              </tr>
              <tr>
                     <td><a href='#' tabindex='2'>menu 3</a></td>
              </tr>
              <tr>
                     <td><a href='#' tabindex='2'>menu 4</a></td>
              </tr>
       </table>
       <div id="0" style="display:none; position: absolute; top:32px; left:150px;" onMouseOver="switch_menus(0,2)" onMouseOut="hide_menus(0)">
              <table bgcolor="white" class="floatMenubar" summary="Subject Areas" width="148" border="1" cellspacing="0" cellpadding="0">
                     <tr>
                            <td title=""><a href="#" tabindex="2">sous menu 1</a></td>
                     </tr>
                     <tr>
                            <td title=""><a href="#" tabindex="2">sous menu 2</a></td>
                     </tr>
              </table>
       </div>
       <div id="1" style="display:none; position: absolute; top:55px; left:150px;" onMouseOver="switch_menus(1,2)" onMouseOut="hide_menus(1)">
              <table bgcolor="yellow" width="148" border="1" cellspacing="0" cellpadding="0">
                     <tr>
                            <td><a href="#" tabindex="2">sous menu 3 </a></td>
                     </tr>
              </table>
       </div>
</body>
</html>
A voir également:

1 réponse

gd1024
 
petite précision, j'utilise mozilla et je viens de tester mon menu avec IE 6 et ca marche beaucoup mieux : le menu ne s'efface pas uniquement lorsque l'on déplace la souris lentement.
Cela viendrait il d'un pb de mozilla?
Ou y a-t-il un pb dans mon menu?
merci pour votre aide
0