Dropdown menu that opens with mouseover and click event only flickering

I am trying to create a dropdown menu that opens upon clicking a button, or hovering over it.

With the code I have, the dropdown menu flickers upon clicking or hovering. In other words, the display and opacity doesn't stay. I want to be able to either click or hover over the dropdown menu header to display the dropdown menu.

HTML:

<div class="menu-link dropdown">
<p class="dropdown-select">Item</p>
<div class="dropdown-menu">
<div class="top">
<div class="arr-wrap">
<div class="arr"></div>
</div>
</div>
<p class="menu-link"><a href="./link.html">Item</a></p>
<p class="menu-link"><a href="./link.html">Item</a></p>
<p class="menu-link"><a href="./item.html">Item</a></p>
<p class="menu-link"><a href="./item.html">Item</a></p>
<p class="menu-link"><a href="./item.html">Item</a></p>
</div>
</div>

CSS:

.menu-link {
width: 100px;
text-align: right;
transition: 0.3s;
margin-right: 25px;
}
.dropdown .menu-link {
width: 200px;
text-align: left;
padding: 15px 0px;
margin-left: 35px;
height: 25px;
}
.dropdown-menu {
position: absolute;
top: 100px;
opacity: 0;
width: fit-content;
height: fit-content;
margin-left: -8px;
width: fit-content;
flex-flow: column;
z-index: 3;
border-radius: 10px;
transition: 0.2s;
background-color: white;
box-shadow: 2px 2px 10px lightgrey;
display: none;
}
.dropdown-select {
height: fit-content;
}
.menu .menu-link {
width: 100px;
text-align: right;
transition: 0.3s;
margin-right: 25px;
}
.dropdown .menu-link {
width: 200px;
text-align: left;
padding: 15px 0px;
margin-left: 35px;
height: 25px;
}
.dropdown-menu {
position: absolute;
top: 100px;
opacity: 0;
width: fit-content;
height: fit-content;
margin-left: -8px;
width: fit-content;
flex-flow: column;
z-index: 3;
border-radius: 10px;
transition: 0.2s;
background-color: white;
box-shadow: 2px 2px 10px lightgrey;
display: none;
}
.dropdown-select {
height: fit-content;
}
.display {
display: flex;
opacity: 1;
z-index: 3;
}

JavaScript:

document.addEventListener('DOMContentLoaded', load, false);
function load() {
document.getElementsByClassName("dropdown")[0].addEventListener("click", dropdown, false);
document.getElementsByClassName("dropdown")[0].addEventListener("mouseover", dropdown, false);
}
function dropdown() {
var dropdown = document.getElementsByClassName("dropdown-menu")[0];
dropdown.classList.toggle("display");
}

It's an easy mistake:
The menu flickers because "mouseover" triggers every time the mouse moves over the element just by a tiny bit. so when you move the mouse over the dropdown menu, mouseover it's constantly calling the function which toggles the "display" class, so it opens, then it closes, then it opens again, and so on to infinity.

to fix it, you should try something like this:

document.getElementsByClassName("dropdown")[0].addEventListener("click", dropdownClick, false);
document.getElementsByClassName("dropdown")[0].addEventListener("mouseenter", dropdownMouseEnter, false);
document.getElementsByClassName("dropdown")[0].addEventListener("mouseleave", dropdownMouseLeave, false);
function dropdownClick() {
var dropdown = document.getElementsByClassName("dropdown-menu")[0];
dropdown.classList.toggle("display");
}
function dropdownMouseEnter() {
var dropdown = document.getElementsByClassName("dropdown-menu")[0];
dropdown.classList.add("display");
}
function dropdownMouseLeave() {
var dropdown = document.getElementsByClassName("dropdown-menu")[0];
dropdown.classList.remove("display");
}

This is not the best way to go on about making a dropdown menu, but this will make what you have work a lot better and more like you first intended.

As said before mouseover will trigger every time the mouse cursor moves over the element, while mouseenter will trigger once on mouse first hovering the element, and mouseleave will trigger it once more when the mouse is no longer hovering the element.

I've taken the liberty to rework it a bit to make it more functional. See below for the result:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function _(id) { return document.getElementById(id); }
_("dropdown1").addEventListener("click", dropdownClick, false);
_("dropdown1").addEventListener("mouseenter", dropdownMouseEnter, false);
_("dropdown1").addEventListener("mouseleave", dropdownMouseLeave, false);
function dropdownClick() {
_("dropdown1").classList.toggle("show");
}
function dropdownMouseEnter() {
_("dropdown1").classList.add("show");
}
function dropdownMouseLeave() {
_("dropdown1").classList.remove("show");
}

<!-- language: lang-css -->

*, *::before, *::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
margin: 0;
padding: 0;
}
body {
background-color: #eee;
margin: 0.5rem;
}
.dropdown-wrap {
position: absolute;
}
.dropdown-wrap .menu-link {
padding: 1rem;
}
.dropdown-wrap .dropdown-select {
padding: 1rem;
cursor: pointer;
width: 7rem;
background-color: white;
border-radius: 0.8rem;
}
.dropdown {
min-width: 12rem;
text-align: left;
position: absolute;
opacity: 0;
display: flex;
flex-flow: column;
left: 0;
top: calc(100% + 0.5rem);
z-index: 3;
border-radius: 0.8rem;
transition: 0.2s;
background-color: white;
box-shadow: 2px 2px 10px lightgrey;
transform-origin: top left;
scale: 0;
}
.dropdown-wrap.show .dropdown {
scale: 1;
opacity: 1;
}

<!-- language: lang-html -->

<div id="dropdown1" class="dropdown-wrap">
<p class="dropdown-select">Item</p>
<div class="dropdown">
<p class="menu-link"><a href="./link.html">Item</a></p>
<p class="menu-link"><a href="./link.html">Item</a></p>
<p class="menu-link"><a href="./item.html">Item</a></p>
<p class="menu-link"><a href="./item.html">Item</a></p>
<p class="menu-link"><a href="./item.html">Item</a></p>
</div>
</div>

<!-- end snippet -->