Question

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

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

我认为这可能与使用以下内容有关：关注CSS，但似乎无法解决问题。

此时我只是挠头。任何帮助都会有用。我只知道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

替换显示并使用visibility css属性。从隐藏的.dropdown_01内容开始，然后使焦点使其可见，然后添加可见的悬停状态，以便单击链接。我放了一个黄色背景，以确保悬停状态对隐藏的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>

表中的菜单超链接无法在chrome和Firefox中使用

1 个答案: