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