Search code examples
javascripthtmlcsssass

Drop down menu not showing when hovering on an element

I have wanted to make a menu appear upon hovering on #navigation-region shown below are the html css and javascript

the javascript just is for adding the active class on the #navigation-region and on the CSS the added there that a part for the active class that will show the menu that is previously hidden

<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 is working and adding the new class but I think the issue is with the styles. When I hover over the #navigation-region the class is being added but the menu still does not show

Solution

  • Html Problem

    Your CSS and JS have no errors. Your problem was with the HTML.

    Changes

    • Your container div has to class-attributes. The right way to add two classes is with a space between the two. (You did that with the other elements)
    • Your
    • tag with id navigation-region is closed before the tag you want to hide and therefor is not a child and you can't show it with you css.

    Here is the full code:

    <div>
  <div class="support-section 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">
        <a href="#" onclick="return false;">Region: USA/Intl
          <span><img src="" alt="icon arrow" id="arrow"></span>
        </a>
      <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">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>
    </ul>
  </div>
</div>