How to do a dropdown menu on click

Question

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

Answer 1

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.

Answer 2

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.com/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> 

Answer 3

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>