html - 表格中的菜单超链接在 Chrome 和 Firefox 中不起作用

Question

我需要一些帮助。我使用我目前对 CSS 和 HTML 的理解复制并粘贴了一些代码来制作这个菜单按钮。当我单击链接时，它们似乎在 Safari 中有效。

在 Chrome 或 Firefox 中，当我悬停时它会识别 href 属性，但当我点击时，没有任何反应。

我认为这可能与在 CSS 中使用 :focus 有关，但这似乎并不能解决问题。

在这一点上，我只是摸不着头脑。任何帮助都会很有用。我只会 CSS 和 HTML，不会 JS。 谢谢!

这是一段代码:

partners_01 {
  border: 1px solid #000;
  padding: 12px 40px;
  border-radius: 2px;
  font-weight: 400;
  /*z-index:999999;*/
  cursor: pointer;
}

.partners_01:hover {
  background: #000;
  color: #fff;
  border-radius: 2px;
}

.dropdown_01 {
  position: relative;
  display: inline-block;
}

.dropdown_01-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /*z-index: 1;*/
}

.dropdown_01-content a {
  color: black;
  padding: 5px 16px;
  text-decoration: none;
  display: block;
  font-size: 12px;
}

.dropdown_01-content a:hover {
  background-color: #f1f1f1
}

.dropdown_01:focus .dropdown_01-content {
  display: block;
}

.dropdown_01:hover partners_01. {
  background-color: #7e8e31;
}


.dropdown_01:focus .partners_01 {background:#000; 
color:#fff;
border-radius: 2px;}

<div class="dropdown_01" tabindex="0">

  <a class="partners_01">View Partners</a>
  <div class="dropdown_01-content">
    <table>
      <tbody>
        <tr>
          <td style="text-align: left; white-space: nowrap;"><strong><a href="http://clients.mndsign.com/smart/bang-olufsen/" target="_blank">Bang &amp; Olufsen</a></strong><a class="noclick_01">--</a><a href="http://architetturasonora.com/" target="_blank">Architectura Sonora</a><a href="http://www.artcoustic.com/"
            target="_blank">Artcoustic</a></td>
          <td style="text-align: left; white-space: nowrap;"><a href="https://www.crestron.com/"><strong>Crestron</strong></a><a class="noclick_01">--</a><a href="https://www.graysound.nl/">Gray Loudspeakers</a><a href="http://www.jamesloudspeaker.com/">James Loudspeakers</a></td>
          <td style="text-align: left; white-space: nowrap;"><a href="https://www.meridian-audio.com/" target="_blank"><strong>Meridian</strong></a><a class="noclick_01">--</a><a href="https://www.savant.com/" target="_blank">Savant</a><a href="https://www.screeninnovations.com/">Screen Innovations</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
  

Answer 1

替换显示并使用可见性 css 属性。 从隐藏的 .dropdown_01-content 开始，然后使用焦点使其可见，然后添加可见的悬停状态以便单击链接。我设置了黄色背景以确保悬停状态适用于隐藏的 div。

partners_01 {
  border: 1px solid #000;
  padding: 12px 40px;
  border-radius: 2px;
  font-weight: 400;
  cursor: pointer;
}

.partners_01:hover {
  background: #000;
  color: #fff;
  border-radius: 2px;
}

.dropdown_01 {
  position: relative;
  display: inline-block;
}

.dropdown_01-content {
  visibility: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown_01-content a {
  color: black;
  padding: 5px 16px;
  text-decoration: none;
  display: block;
  font-size: 12px;
}

.dropdown_01-content a:hover {
  background-color: #f1f1f1;
  display: block;
}

.dropdown_01:focus .dropdown_01-content {
  visibility: visible;
}

.dropdown_01-content:hover {
  visibility: visible;
  background: yellow;
}

.dropdown_01:hover partners_01. {
  background-color: #7e8e31;
}

.dropdown_01:focus partners_01 {
  background: #000;
  color: #fff;
  border-radius: 2px;
}

<div class="dropdown_01" tabindex="0">

  <a class="partners_01">View Partners</a>
  <div class="dropdown_01-content">
    <table>
      <tbody>
        <tr>
          <td style="text-align: left; white-space: nowrap;"><strong><a href="https://clients.mndsign.com/smart/bang-olufsen/">Bang &amp; Olufsen</a></strong><a class="noclick_01">--</a><a href="https://architetturasonora.com/">Architectura Sonora</a><a href="https://www.artcoustic.com/">Artcoustic</a></td>
          <td style="text-align: left; white-space: nowrap;"><a href="https://www.crestron.com/"><strong>Crestron</strong></a><a class="noclick_01">--</a><a href="https://www.graysound.nl/">Gray Loudspeakers</a><a href="https://www.jamesloudspeaker.com/">James Loudspeakers</a></td>
          <td style="text-align: left; white-space: nowrap;"><a href="https://www.meridian-audio.com/"><strong>Meridian</strong></a><a class="noclick_01">--</a><a href="https://www.savant.com/">Savant</a><a href="https://www.screeninnovations.com/">Screen Innovations</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>