Creating a Menu with Javascript

[mohorter]

I am creating a menu with javascript and it works just fine if i keep the text as the links. But when i put in my images for the menu my dropdown for the Menus doesn't work. If you click on the image it won't do anything, but slightly below the image it shows the clickable area. Any idea on what is wrong here. Site is: http://currents-restaurant.com/form.html

 

here is my code that i'm using

 

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #9cb9ca;

text-align: center;

}

li {

display: inline-block;

}

li a, .dropbtn {

display: inline-block;

color: #8F090B;

text-align: center;

padding: px px;

text-decoration: none;

}

li a:hover, .dropdown:hover {

background-color: #5563D3;

}

li.dropdown {

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 150px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown-content a {

color: black;

padding: px px;

text-decoration: none;

display: block;

text-align: left;

}

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

.show {display:block;}

</style>

 

 

 

<center><ul>

<li><a href="index.html"><img src="pictures/buttonhome.png" width="150" alt="Home"></a></li>

<li class="dropdown">

<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()"><img src="pictures/buttonmenus.png" width="150" alt="Menus"></a>

<div class="dropdown-content" id="myDropdown">

<a href="breakfast.html"><img src="pictures/breakfastbutton.png" width="150" alt="Breakfast"></a>

<a href="dinner.html"><img src="pictures/dinnerbutton.png" width="150" alt="Dinner"></a>

<a href="lounge.html"><img src="pictures/loungebutton.png" width="150" alt="Lounge"></a>

</div>

<li><a href="specials.html"><img src="pictures/buttonspecials.png" width="150" alt="Specials"></a></li>

<li><a href="form.html"><img src="pictures/buttonreservations.png" width="150" alt="Reservations"></a></li>

<li><a href="email.html"><img src="pictures/buttonemail.png" width="150" alt="Email List"></a></li>

</li>

</ul></center>

<script>

/* When the user clicks on the button,

toggle between hiding and showing the dropdown content */

function myFunction() {

document.getElementById("myDropdown").classList.toggle("show");

}

// Close the dropdown if the user clicks outside of it

window.onclick = function(e) {

if (!e.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");

for (var d = 0; d < dropdowns.length; d++) {

var openDropdown = dropdowns[d];

if (openDropdown.classList.contains('show')) {

openDropdown.classList.remove('show');

}

}

}

}

</script>