Question

我有一个带有导航栏菜单的HTML文档。菜单上的其中一个项目有一个下拉菜单，其中包含可点击的链接。在Chrome和IE中一切正常，但在Firefox中，下拉链接中的链接有问题。

这是代码。我试图只保留相关部分，所以希望我不会意外删除任何重要部分：

   #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>

在HTML代码中，onclick="window.location='item_2.html';"就在那里，因为我希望导航栏菜单项中的整个框可以点击，而不仅仅是文本里面的文本 - 这是我发现的唯一方法 - 我试过，例如，将锚标记放在该列表项的外部，以及其他几个我现在都记不起来的解决方案。但是，onclick解决方案似乎使得下拉菜单中的链接都导致item_2.html，而不是item_2a.html等。再次，这只是Firefox中的一个问题。

有没有人知道解决这个问题的方法？

Answer 1

我找到了解决方案。我在包含<div class="dropdown-content">函数的stopPropagation()中添加了一些内联javascript。 HTML现在读作：

<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>

我在Chrome，IE和Firefox中进行了短暂的测试，它在所有3个版本中都有效，所以这似乎可以解决问题。

在Firefox中使用下拉菜单行为进行onclick链接

1 个答案: