I'm doing a dropdown-menu and I want it to open when I click on the dropdown-btn, I watched a w3schools tutorial, why it doesn't work?

I copied all the tutorial but I don't know why it doesn't work

HTML (I changed only the dropdown ID and the function name)

CSS (I changed only the sizes and the colors)

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropdown {
  float: right;
  margin-right: 115px;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #ff0000;
  font-family: inherit;
  margin: 0;
}

.dropbtn:hover {
  cursor: pointer;
}

.dropdown:hover {
  background-color: #ff7b7b;
  text-decoration: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ff0000 !important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3 ease-in;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ff7b7b;
}

.show {
  display: block;
  z-index: 11;
}

<div class="dropdown">
  <button class="dropbtn" onclick="myFunction()"><li class="fa fa-bars fa-2x"></li></button>
  <div class="dropdown-content" id="myDropdown">
    <a href="signup.php" style="color: white;">Signup</a>
    <a href="#" style="color: white;">Info</a>
    <a href="#" style="color: white;">Last news</a>
  </div>
</div>

I'm doing a dropdown-menu and I want it to open when I click on the dropdown-btn, I watched a w3schools tutorial, why it doesn't work?

I copied all the tutorial but I don't know why it doesn't work

HTML (I changed only the dropdown ID and the function name)

CSS (I changed only the sizes and the colors)

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropdown {
  float: right;
  margin-right: 115px;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #ff0000;
  font-family: inherit;
  margin: 0;
}

.dropbtn:hover {
  cursor: pointer;
}

.dropdown:hover {
  background-color: #ff7b7b;
  text-decoration: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ff0000 !important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3 ease-in;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ff7b7b;
}

.show {
  display: block;
  z-index: 11;
}

<div class="dropdown">
  <button class="dropbtn" onclick="myFunction()"><li class="fa fa-bars fa-2x"></li></button>
  <div class="dropdown-content" id="myDropdown">
    <a href="signup.php" style="color: white;">Signup</a>
    <a href="#" style="color: white;">Info</a>
    <a href="#" style="color: white;">Last news</a>
  </div>
</div>

If I click on the dropdown-btn it not works

• javascript
• html
• css
• drop-down-menu
• onclick

• Since I saw you we're using the same code: w3schools./howto/tryit.asp?filename=tryhow_css_js_dropdown Check out this, re-copy the CSS. – ABC Commented Mar 29, 2019 at 21:01
• 1 Wele to stackoverflow. "it not works" is too unspecific to figure out the issue. Please add what you did to resolve it yourself. And, you might like to start getting into debugging. Do you know how to use the JavaScript console in your browser? Googling "how to open the javascript console" might be a start - please edit your question with any error messages you see there. – HumanInDisguise Commented Mar 29, 2019 at 21:03
• Your CSS is hiding the dropdown. – ABC Commented Mar 29, 2019 at 21:04
• I watched a w3schools tutorial, why it doesn't work? Answer: I watched a w3schools tutorial – Scott Marcus Commented Mar 29, 2019 at 21:25
• @JenniferGoncalves Can you clarify your ment? Of course you can use .toggle() when an element has more than one class. .toggle() requires you to specify the class you wish to toggle the use of and any other styling will be adjusted appropriately.. – Scott Marcus Commented Mar 29, 2019 at 21:27

3 Answers 3

Cosider a details/summary solution. Much less code and has the dropdown functionality already built-in:

<details><summary>Items</summary>
<div onclick="">Item 1</div>
<div onclick="">Item 2</div>
<div onclick="">Item 3</div>
<div onclick="">Item 4</div>
</details>

NB: Supported by all browsers minus Edge.

I just update your code with few change try this, I hope it'll help you out. Thanks

function myFunction() {
  $('#myDropdown').toggleClass('show');
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropdown {
  float: right;
  margin-right: 115px;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #ff0000;
  font-family: inherit;
  margin: 0;
}

.dropbtn:hover {
  cursor: pointer;
}

.dropdown:hover {
  background-color: #ff7b7b;
  text-decoration: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ff0000 !important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3 ease-in;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ff7b7b;
}

.show {
  display: block;
  opacity: 1;
  z-index: 11;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown">
  <button class="dropbtn" onclick="myFunction()"><li class="fa fa-bars fa-2x"></li></button>
  <div class="dropdown-content" id="myDropdown">
    <a href="signup.php" style="color: white;">Signup</a>
    <a href="#" style="color: white;">Info</a>
    <a href="#" style="color: white;">Last news</a>
  </div>
</div>

Your code is fine, just delete opacity:0 from this css:

 .dropdown-content {
  display: none;
  position: absolute;
  background-color: #ff0000 !important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  opacity: 0; //<----------------------------------delete this
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3 ease-in;
}

Your items are displaying but you can not see them because its opacity is zero. Also don't use <li> inside a button. It produced unexpected results which I couldn't figure out why.

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropdown {
  float: right;
  margin-right: 115px;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #ff0000;
  font-family: inherit;
  margin: 0;
}

.dropbtn:hover {
  cursor: pointer;
}

.dropdown:hover {
  background-color: #ff7b7b;
  text-decoration: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ff0000 !important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3 ease-in;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ff7b7b;
}

.show {
  display: block;
  z-index: 11;
}

<div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">Menu</button>
  <div class="dropdown-content" id="myDropdown">
    <a href="signup.php" style="color: white;">Signup</a>
    <a href="#" style="color: white;">Info</a>
    <a href="#" style="color: white;">Last news</a>
  </div>
</div>