Dropdown content not Showing W3.CSS

Question

I am using W3.CSS framework. Been using Bootstrap before but i think W3.css is more fast and want to try it out as well.

I set a dropdown button with contents but when i hover it, it does not show dropdown.

Am I missing anything out? i Have tried this on Chrome and Edge. below is the code.

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

yeah leading `<` is missing... rest works fine I tried it in online editor. — Abhisar Tripathi, Dec 24 '19 at 10:54
the opening < not here is a typo error. It is there and still not working — mantics, Dec 24 '19 at 11:15

score 0 · Answer 1 · answered Dec 27 '19 at 08:40

This issue is properly addressed here: Dropdowns by w3schools

You need to put the Javascript script link provided by w3schools. I have created one I am sure it will work for you. For more examples you can visit the above link.

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>

Dropdown content not Showing W3.CSS

1 Answers1