mohorter Posted November 16, 2016 Share Posted November 16, 2016 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> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now