Add class on hover using JavaScript

Question

I want to add class on ul that is inside my one li element in nav. My problem is that I want to show list on hover and later click something on it, but when I mouse enter on that li menu shows and when I want to go down and click something menu disappears. I want to do this in vanilla JavaScript.

document.addEventListener('DOMContentLoaded', function () {
    var dropdownItem = document.querySelector('.dropdown-item');
    var dropdown = document.querySelector('.dropdown');

    dropdownItem.addEventListener('mouseenter', function (e) {
        dropdown.classList.add('dropdown-show');
    });
    dropdownItem.addEventListener('mouseleave', function () {
        dropdown.classList.remove('dropdown-show');
    })

})

  .menu {
     list-style: none;
     display: flex;
     width: 30%;
     justify-content: space-between;
     align-items: center;
  }
   .menu li {
     position: relative;
  }
   .menu li a {
     color: #999;
     text-decoration: none;
  }
   .menu .dropdown-item {
     position: relative;
  }
   .menu .dropdown-item .dropdown {
     position: absolute;
     list-style: none;
     top: 5px;
     padding-top: 40px;
     left: -30px;
     visibility: hidden;
     opacity: 0;
     transition: 0.3s;
  }
   .menu .dropdown-item .dropdown .triangle {
     border: 10px solid transparent;
     border-bottom-color: #000;
     width: 0;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     position: absolute;
  }
   .menu .dropdown-item .dropdown.dropdown-show {
     opacity: 1;
     visibility: visible;
  }
   .menu .dropdown-item .dropdown li {
     background-color: #000;
     padding: 10px 20px;
     font-weight: lighter;
  }

<ul class="menu">
    <li class="dropdown-item"><a href="#">O Firmie</a>
        <ul class="dropdown">
            <div class="triangle"></div>
            <li><a href="#">Aktualności</a></li>
            <li><a href="#">Nasz team</a></li>
            <li><a href="#">Historia</a></li>
        </ul>
    </li>
    <li><a href="#">Galeria</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

Answer 1

Default Z-index of my li was somehow under other div...

.menu {
    list-style: none;
    display: flex;
    width: 30%;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
}

Now it works perfectly and menu is not dissapearing on mouseleave in that menu

Thank you guys for help

Answer 2

There is a lot happening with your SCSS and it doesn't work in jsfiddle. That said, I was able to get the basic functionality you were seeking working with this little snippet.

The problem with your code is, that you're adding the mouseleave event to the very element (dropdown-item), that shows your dropdown in the first place. The mouseleave event should be on the parent (dropdown).

Here's the code:

document.getElementsByClassName("dropdown-item")[0].addEventListener("mouseover", function(e) {
    const parent = e.target.parentElement;
    if (parent && parent.tagName === "LI" && parent.classList.contains("dropdown-item")) {
        const parent = e.target.parentElement;
        parent.children[1].classList.add("active");
    }
});
    
document.getElementsByClassName("dropdown")[0].addEventListener("mouseout", function(e) {
    e.target.classList.remove("active");
});

.dropdown {
    display: none;
}
    
.active {
    display: block;
}

<ul class="menu">
    <li class="dropdown-item"><a href="#">O Firmie</a>
        <ul class="dropdown">
            <div class="triangle"></div>
            <li><a href="#">Aktualności</a></li>
            <li><a href="#">Nasz team</a></li>
            <li><a href="#">Historia</a></li>
        </ul>
    </li>
    <li><a href="#">Galeria</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

* Note that this gives you a quick idea of how to go about it. It's neither perfect, nor efficient code.