I am currently facing an issue with my Javascript menu. The hover and click functionality for the main menu items is working perfectly fine, but I am struggling to make the dropdown feature work.
Here is the code snippet from menu.js:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
//document.getElementById("myDropdown").classList.toggle("show");
//document.getElementsByClassName("dropdown-content").show);
//document.getElementById("pmd").classList.toggle("show");
pmd.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[i];
if(openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
if(!event.target.matches('.dropbtnpm')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for(i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
//if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
Below is the HTML code snippet for the menu where I want to implement a dropdown. Currently, I'm just trying to display the text "test" to check functionality:
<td><button onmouseover="myFunction();"
onclick="location.href='property-mngt.html';" value="Property Management"
class="dropbtn">PROPERTY MANAGEMENT</button>
<div id="pmd" class="dropdown-content"> test </div>
</td>
The CSS styles are as follows:
.dropbtn {
border: none;
padding: 16px;
cursor: pointer;
background-color: #ffffff;
color: black;
height: 125px;
min-height: 125px;
font-size: 12px;
}
/* Additional CSS styles omitted for brevity */
My objective is to have the dropdown list appear when hovering over the specific menu item. Despite trying different approaches like changing the class in the HTML, such as
<div id="pmd" class="dropdown-content.show"> test </div>I seem to be stuck on how to trigger the dropdown to show up upon hovering over that particular menu item. Any insights or suggestions would be greatly appreciated!