Javascript function not working
I am using a Javascript function for my navigation menu. Why isnt the function working? Do I need a different function for each menu item?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>100 Black Men of San Antonio - Prototype</title>
<link href="100style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class = "container">
<div class = "home_nav">
<a href="#home" class = "nav_Links"><img src="100bmosalogo.jpg" width="25" height="12" alt="Home Logo"/>Home</a>
</div>
<div class="dropdown_about_us">
<button class="dropbtn" onclick="myFunction()">About Us</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown_events">
<button class="dropbtn" onclick="myFunction()">
<a href="#" class = "nav_Links">Events/Calendar</a>
</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">2017 Annual Awards Dinner</a>
<a href="#">2017 Fatherhood Jubilee</a>
<a href="#">Educational Choice Townhall</a>
</div>
</div>
<div class="dropdown_get_involved">
<button class="dropbtn" onclick="myFunction()">
<a href="#" class = "nav_Links">Get Involved</a>
</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Membership</a>
<a href="#">Mentor</a>
<a href="#">Mentee</a>
</div>
</div>
<div class = "nav_programs">
<a href="#" class = "nav_Links">Programs</a>
</div>
<div class = "nav_donate">
<a href="#" class = "nav_Links">Donate</a>
</div>
<div class="dropdown_more">
<button class="dropbtn" onclick="myFunction()">
<a href="#" class = "nav_Links">More</a>
</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">100 Black Men</a>
<a href="#">Black Men's Health Project</a>
<a href="#">Member's Only</a>
</div>
</div>
</nav>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
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;
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
.dropbtn{
background-color: rgba(48,48,48,1.00);
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.container {
background-color: rgba(48,48,48,1.00);
color: rgba(255,255,255,1.00);
display: block;
margin-left: -10px;
margin-right: -10px;
}
.nav_Links{
color: rgba(255,255,255,1.00);
margin-top: 50px;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
}
.nav_programs {
margin-left: 514px;
margin-top: -34px;
max-width: 70px;
}
.nav_donate {
margin-left: 626px;
margin-top: -18px;
max-width: 55px;
}
.dropdown_more {
margin-left: 707px;
margin-top: -35px;
max-width: 55px;
}
.dropdown_about_us {
margin-left: 100px;
background-color: rgba(48,48,48,1.00);
color: white;
font-size: 16px;
border: none;
cursor: pointer;
max-width: 103px;
margin-top: -35px;
}
.dropdown_events {
margin-left: 210px;
margin-top: -50px;
max-width: 125px;
}
.home_nav {
margin-top: 0px;
padding-top: 50px;
padding-left: 1px;
max-width: 67px;
margin-left: 0px;
}
.dropdown_get_involved {
margin-left: 355px;
margin-top: -50px;
max-width: 115px;
}
.dropbtn_au{
background-color: rgba(48,48,48,1.00);
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content_au {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
AdChoices