Javascript 仅通过鼠标悬停和点击事件打开的下拉菜单只会闪烁

我正在try 创建一个下拉菜单，可以在单击按钮或将鼠标悬停在其上时打开.

使用我的代码，下拉菜单在单击或悬停时闪烁.换句话说，显示和不透明度不会一直存在.我希望能够点击或悬停在下拉菜单标题上以显示下拉菜单.以下是Html、css和JS:

`<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>`


`
.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;
}`

   `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");
}`