Problème de menu déroulant

Bonjour,

Je travaille actuellement sur un site qui intègre un menu déroulant CSS. Dans la page principale est inclue une application GWT (dans une div différente). Le menu déroulant est parfaitement fonctionnel, mais étrangement il semble créer des dysfonctionnements dans l'application GWT.

J'essaie de comprendre ce code CSS, mais il m'est bien obscur et je n'arrive pas à résoudre mon problème. Je poste le code de mon menu déroulant ci-dessous dans l'espoir que l'un de vous aura une idée à me soumettre:

Mon menu en HTML:

    <div id="menus">
      <ul>
       <li id="topMenu">
        <a href="..." onMouseOver="self.status=' '; return true;" onMouseOut="self.status=' '; return true;">
menu1
        </a>
        <ul>
         <li>

          <span>
menu1.1
          </span>
          <ul>
           <li>
            <a href="..." onMouseOver="self.status=' '; return true;" onMouseOut="self.status=' '; return true;">
menu 1.1.1
            </a>
           </li>
           <li>
            <a href="..." onMouseOver="self.status=' '; return true;" onMouseOut="self.status=' '; return true;">

menu 1.1.2
            </a>
           </li>
          </ul>
         </li>
        </ul>
       </li>
       <li id="topMenu">
        <a href="..." onMouseOver="self.status=' '; return true;" onMouseOut="self.status=' '; return true;">
menu2
        </a>

        <ul>
         <li>
          <span>
menu2.1
          </span>
          <ul>
           <li>
            <a href="..." onMouseOver="self.status=' '; return true;" onMouseOut="self.status=' '; return true;">
menu2.1.1
            </a>
           </li>

          </ul>
         </li>
         <li>
          <span>
menu2.2
          </span>
          <ul>
           <li>
            <a href="..." onMouseOver="self.status=' '; return true;" onMouseOut="self.status=' '; return true;">
menu2.2.1
            </a>

           </li>
           <li>
            <a href="..." onMouseOver="self.status=' '; return true;" onMouseOut="self.status=' '; return true;">
menu2.2.2
            </a>
           </li>
          </ul>
         </li>
         <li>
          <span>

menu2.3
          </span>
          <ul>
           <li>
            <a href="..." onMouseOver="self.status=' '; return true;" onMouseOut="self.status=' '; return true;">
menu2.3.1
            </a>
           </li>
          </ul>
         </li>
        </ul>
       </li>
      </ul>
     </div>

Et voici mes blocs CSS correspondants:

#menus ul {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

#menus ul li a {
  display: block;
  text-decoration: none;
  width: 99px;
  height: 22px;
  padding-top: 6px;
  color: #202020;
}

#topMenu {
  background: url('../images/bouton_menu.jpg') top left no-repeat;
  font-weight: bold;
  width: 105px;
  text-align: center;
}

#topMenu:hover {
  background: url('../images/bouton_menu2.jpg') top left no-repeat;
}

#topMenu a.select {
  color: #1660a7;
}

#menus {
  background: url('../images/barre_menu.jpg') top left repeat-x;
  height:28px;
  text-align: left;
  margin-bottom: 20px;
  border: 1px solid #4C4C4C;
  z-index: 10 !important;
}

#menus li { 
  float: left; /* 2 */
  list-style: none;
}

#menus li ul { 
  width: 105px;
  padding: 0;
  padding-top:4px;
  margin: 0;
}

#menus li ul a {
  background-color: #e2e7eb;
  border: 1px solid #A0A0A0;
  margin-top: -1px;
  margin-left: -1px;
}

#menus li ul a:hover {
  background-color: #f4f7fc;
}

#menus li ul li {
  margin:-3px 0 0 0;
}

#menus li ul li ul a {
  margin-left: -24px;
  text-align: center;
  padding-left: 5px;
  width: 140px;
}

#menus li:hover ul ul {
  left: -999em;
}

#menus li ul li ul li {
  position: relative;
  left: 128px;
  top: -30px;
  z-index: 10 !important;
}

#menus li:hover ul, #menus li li:hover ul { 
  left: auto;
}

#menus ul li span {
  display: block;
  text-decoration: none;
  width: 104px;
  height: 22px;
  padding-top: 6px;
  color: #202020;
  background-color: #e2e7eb;
  border: 1px solid #A0A0A0;
  margin-top: -1px;
  margin-left: -1px;
  text-align: center;
}

#menus ul li span:hover {
  background-color: #f4f7fc;
}

Voilà, je me dis que peut-être l'oeil avisé de l'un d'entre vous pourrait remarquer une incohérence qui pourrait engendre des dysfonctionnements.

Merci d'avance pour votre aide.
Modifié par Beru35 (24 May 2011 - 13:09)