下拉菜单不会出现在导航栏中

Question

I am having an issue with my dropdown menu after clicking, it won't appear in the way I want to, it should just be a simple dropdown menu with the tab "about" like the one from w3schools.

Here is the code:

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunctionlang() { document.getElementById("myDropdown").classList.toggle("showlang"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtnlang')) { var dropdowns = document;getElementsByClassName("dropdownlang-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('showlang')) { openDropdown.classList;remove('showlang'); } } } }

 /*dropdown lang start*/.dropbtnlang { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtnlang:hover, .dropbtnlang:focus { background-color: #2980B9; }.dropdownlang { position: relative; display: inline-block; }.dropdownlang-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdownlang-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdownlang a:hover { background-color: #ddd; }.showlang { display: block; } /*dropdown lang end*/

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <a href="#"><i class="fa fa-fw fa-language" onclick="myFunctionlang()" class="dropbtnlang"></i></a> <div id="myDropdown" class="dropdownlang-content"> <a href="#about">Test</a> </div>

Answer 1

Your problem is here <i class="fa fa-fw fa-language" onclick="myFunctionlang()" class="dropbtnlang"></i> you have set class attribute twice, I've just fix this minor issue in your code and everything seems ok.

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunctionlang() { document.getElementById("myDropdown").classList.toggle("showlang"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtnlang')) { var dropdowns = document;getElementsByClassName("dropdownlang-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('showlang')) { openDropdown.classList;remove('showlang'); } } } }

 /*dropdown lang start*/.dropbtnlang { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtnlang:hover, .dropbtnlang:focus { background-color: #2980B9; }.dropdownlang { position: relative; display: inline-block; }.dropdownlang-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdownlang-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdownlang a:hover { background-color: #ddd; }.showlang { display: block; } /*dropdown lang end*/

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <a href="#"><i class="fa fa-fw fa-language dropbtnlang" onclick="myFunctionlang()" ></i></a> <div id="myDropdown" class="dropdownlang-content"> <a href="#about">Test</a> </div>