My webpage has a simple set of links, and one of them triggers a dropdown menu to appear on mouseover (refer to the image below). The dropdown submenu becomes visible when the link "How fast is it?" is hovered over, and remains fixed in place due to the display property being set to block (check out the CSS code for the dropdown-content). I am aiming for this dropdown submenu to disappear when any of the main links on the page are moused over, including those that are partially hidden by the dropdown. To accomplish this, I believe jQuery would be necessary, but I haven't come across the right plugin yet.
Below you will find the HTML code for the links and the dropdown menu:
<div class="left_links">
<div class="C1"><br><button class="button_01" onmouseover="ShowText(1)">What is It?</button></div>
<div class="C1"><br>
<div class="dropdown">
<button class="button_01" onmouseover="ShowText(5)">How fast is It? </button>
<div class="dropdown-content">
<div class="C1"><button class="button_dropdown" onclick="ShowText(101)">Sub_Link 01</button></div>
<div class="C1"><button class="button_dropdown" onclick="ShowText(102)">Sub_Link 02</button></div>
<div class="C1"><button class="button_dropdown" onclick="ShowText(103)">Sub_Link 03</button></div>
<div class="C1"><button class="button_dropdown" onclick="ShowText(104)">Sub_Link 04</button></div>
<div class="C1"><button class="button_dropdown" onclick="ShowText(105)">Sub_Link 05</button></div>
<div class="C1"><button class="button_dropdown" onclick="ShowText(106)">Sub_Link 06</button></div>
<div class="C1"><button class="button_dropdown" onclick="ShowText(107)">Sub_Link 07</button></div>
<div class="C1"><button class="button_dropdown" onclick="ShowText(108)">Sub_Link 08</button></div>
</div>
</div>
</div>
<br><br>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(2)">How does It work?</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(3)">Pricing</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(4)">Support</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(5)">FAQs</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(6)">Documentation</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(7)">Terms of Service</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(8)">Privacy</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(9)">About Us</button></div>
</div>
And here is the CSS code for the links and the dropdown menu:
.dropdown {
position: absolute;
z-index: 100;
display: inline-block;
overflow: hidden;
}
.dropdown-content {
display: block;
background-color: rgb(105,105,105);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 15px;
margin-left: 40px;
margin-top: 0px;
font-family: camphorW04-Thin,calibri,arial;
font-size: 16pt;
max-height: 30%;
}
.button_dropdown {
background-color: rgb(105,105,105);
border: none;
color: #DBDBDB;
font-family: camphorW04-Thin,calibri,arial;
font-size: 12pt;
text-align: left;
text-decoration: none;
cursor: ptr;
}
.button_dropdown:hover {color: white;}
.left_links {
grid-column: 5 / 20;
grid-row: 5 / 15;
text-align: left;
}
.C1{
color:#DBDBDB;
font-family: sans-serif;
font-size: 14pt;
text-indent: 0px;
width: auto;
margin: auto;
}
.button_01 {
background-color: #555555;
border: none;
color: rgb(255,255,255);
text-align: left;
text-decoration: none;
font-size: 12pt;
cursor: pointer;
}
.button_01:hover { color: white;}
In conclusion, my query is - which jQuery plugin, or alternative CSS/JavaScript approach, can be utilized to hide the dropdown submenu upon hovering over any of the main links? I intend for the menu to remain stationary once displayed until a new hover event occurs.
Thank you for any suggestions on resolving this question. A screenshot can be viewed below.