onclick lien avec le comportement du menu déroulant dans Firefox

Question

J'ai un document HTML avec un menu de la barre de navigation. Un des éléments du menu a un menu déroulant qui a des liens cliquables. Tout fonctionne bien dans Chrome et IE, mais dans Firefox les liens dans les liens déroulants ont des problèmes.

Voici le code. J'ai essayé de ne garder que les parties pertinentes, si tout va bien je ne l'ai pas supprimer accidentellement quelque chose d'important:

#menu-items { 
 
    height: 100%; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    } 
 
    
 
    #menu-items li { 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    display: inline-block; 
 
    float: left; 
 
    } 
 
    
 
    #menu-items a { 
 
    text-decoration: none; 
 
    } 
 
    
 
    .dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 
    
 
    .dropdown-content { 
 
    display: none; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    } 
 
    
 
    .dropdown-content a { 
 
    padding-left: 11px; 
 
    padding-right: 9px; 
 
    text-decoration: none; 
 
    display: block; 
 
    } 
 
    
 
    .dropdown:hover .dropdown-content { 
 
    display: block; 
 
    }

<div id="nav-bar"> 
 
    <div id="menu"> 
 
    <div id="menu-items"> 
 

 
     <a href="item_1.html"> 
 
     <li>item_1</li> 
 
     </a> 
 
     <li class="dropdown" style="cursor: pointer;" onclick="window.location='item_2.html';"> 
 
     <div class="dropdown"><a href="item_2.html">item_2</a> 
 
      <div class="dropdown-content"> 
 
      <a href="item_2a.html">item_2a</a> 
 
      <a href="item_2b.html">item_2b</a> 
 
      <a href="item_2c.html">item_2c</a> 
 
      <a href="item_2d.html">item_2d</a> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <a href="item_3.html"> 
 
     <li>item_3</li> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Dans le code HTML, le onclick="window.location='item_2.html';" est là parce que je veux la boîte entière dans cette barre de navigation l'élément de menu est cliquable, plutôt que le texte à l'intérieur - c'est la seule façon que j'ai trouvé pour que cela se produise - j'ai essayé, par exemple, de placer les balises d'ancrage à l'extérieur de cet élément de liste, ainsi que plusieurs autres des solutions que je ne peux pas rappeler maintenant. Cependant, la solution onclick semble faire en sorte que les liens dans le menu déroulant mènent tous à item_2.html, plutôt que item_2a.html, etc. Encore une fois, c'est un problème dans Firefox seulement.

Est-ce que quelqu'un sait un moyen de résoudre ce problème?

Answer 1

J'ai trouvé une solution. J'ai ajouté un javascript en ligne au <div class="dropdown-content"> contenant la fonction stopPropagation(). Le code HTML se lit maintenant comme:

<div id="nav-bar"> 
    <div id="menu"> 
    <div id="menu-items"> 

     <a href="item_1.html"> 
     <li>item_1</li> 
     </a> 
     <li class="dropdown" style="cursor: pointer;" onclick="window.location='item_2.html';"> 
     <div class="dropdown"><a href="item_2.html">item_2</a> 
      <!--HERE'S THE CHANGE--> 
      <div class="dropdown-content" onclick="(function(e) { e.stopPropagation(); })(event)"> 
      <a href="item_2a.html">item_2a</a> 
      <a href="item_2b.html">item_2b</a> 
      <a href="item_2c.html">item_2c</a> 
      <a href="item_2d.html">item_2d</a> 
      </div> 
     </div> 
     </li> 
     <a href="item_3.html"> 
     <li>item_3</li> 
     </a> 
    </div> 
    </div> 
</div> 

Je l'ai testé brièvement dans Chrome, IE et Firefox, il a travaillé dans tous les trois, de sorte que semblait faire l'affaire.