I have been trying to create a menu that appears when hovering over #navigation-region. Below, you can see the HTML, CSS, and JavaScript code:
The JavaScript is simply for adding the active class on the #navigation-region element. In the CSS, there is a section for the active class that will display the previously hidden menu.
<div>
<div class="support-section" class="nav-secondary__support-link">
<ul class="nav__support-links">
<li id="support-phone-usa" class="support-phone">
<a href="tel:asdasdas" ><img src="h" alt="Phone Icon">aasdasd6</a>
</li>
<li id="support-phone-int" class="support-phone">
<a href="asdasdasd" >Iasdasdasd</a>
</li >
<li id="navigation-region" class="">
<a href="#" onclick="return false;">Region: USA/Intl
<span><img src="" alt="icon arrow" id="arrow"></span>
</a>
</li>
<ul class="nav-secondary__dropdown nav-secondary__dropdown-region">
<li class="nav-secondary__dropdown-link nav-secondary__dropdown-title">Select your preferred<span>country / region:</span></li>
<span class="nav-secondary__hr"></span>
<li class="link nav-secondary__dropdown-link-region">
<a href="asdasdasd" lang="en-US"><picture><source srcset="/asdasdasd" media="(min-width: 768px)"></picture>USA + International</a>
</li>
<li class="link nav-secondary__dropdown-link-region">
<a href="asdasdasd/" lang="en-CA"></picture>Canada</a>
</li>
<span class="nav-secondary__hr-end"></span>
<li class="nav-secondary__dropdown-link nav-secondary__dropdown-copy" style="font-style: normal;text-transform: none;font-size: 14px;">Experience local shipping options and optimized product inventory for your region.</li>
</ul>
</li>
<div>
.support-section {
display: flex;
justify-content: flex-end;
.nav__support-links {
display: flex;
list-style: none;
align-items: center;
gap: 20px;
.nav-secondary__support-link-active .nav-secondary__dropdown-region {
opacity: 1;
visibility: visible;
display: block;
}
}
.nav-secondary__dropdown-region {
visibility: hidden;
opacity: 0;
display: none;
::before {
content: "";
position: absolute;
top: -8px;
right: -3px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
}
}
if (navigationRegion) {
navigationRegion.addEventListener("click", function (event) {
const linkElem = event.target.closest('a');
if (linkElem) {
const parentElem = linkElem.parentElement;
if (parentElem.classList.contains('nav-secondary__support-link-active')) {
return false;
}
linkElem.parentElement.classList.add('nav-secondary__support-link-active');
linkElem.setAttribute('aria-expanded', 'true');
}
});
navigationRegion.onmouseover = function () {
if (!navigationRegion.classList.contains('nav-secondary__support-link-active')) {
navigationRegion.children[0].setAttribute('aria-expanded', 'true')
navigationRegion.classList.add('nav-secondary__support-link-active');
return false;
}
}
navigationRegion.onmouseout = function () {
if (navigationRegion.classList.contains('nav-secondary__support-link-active')) {
navigationRegion.children[0].setAttribute('aria-expanded', 'false')
navigationRegion.classList.remove('nav-secondary__support-link-active');
return false;
}
}
}
The JavaScript successfully adds the new class, but I suspect the issue lies with the styling. Even though the class is added when hovering over #navigation-region, the menu does not appear as expected.