css - 下拉内容不显示 W3.CSS

Question

我正在使用 W3.CSS 框架。之前一直在使用 Bootstrap，但我认为 W3.css 更快，也想尝试一下。

我设置了一个包含内容的下拉按钮，但是当我悬停它时，它不显示下拉菜单。

我错过了什么吗？我已经在 Chrome 和 Edge 上试过了。下面是代码。

<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown <i class="fa fa-caret-down"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

Answer 1

此问题已在此处得到妥善解决:Dropdowns by w3schools

你需要放上w3schools提供的Javascript脚本链接。我已经创建了一个我相信它会为你工作。有关更多示例，您可以访问上面的链接。

function myFunction() {
  var x = document.getElementById("Demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-container">

  <p>Dropdown click Demo</p>
  <div class="w3-dropdown-click">
    <button onclick="myFunction()" class="w3-button w3-black">Click Me!</button>
    <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
  </div>
</div>