dropdown hides even when mouse is over it

I am trying to make a dropdown. So when i hover over the button, the list should pop up, and when i leave the button as well as the list (i.e listcontainer), the list should disappear. Everything works except the latter part. The list disappears as soon as i leave the button (even though i am over the list container). Issue I don't understand why. You may ignore the CSS code and html code. Semantics: Please note button is a div with class button

If you've read the code: The hideul function runs multiple times when it enters the listcontainer from the button (please check console). I don't get this part as well. Please also let me know if there is a better way to do this logic.

Please visit to see the error

var button = document.querySelector(".button")
var list = document.querySelector("ul")
var listcontainer = document.querySelector(".listcontainer")

var mouseleftlistcontainer = true
var mouseleftbutton = true

function hideul(e, text) {
    console.log(text)
    if (mouseleftlistcontainer && mouseleftbutton) {
        list.classList.remove("effectt")
    }
}

button.addEventListener("mouseover", e => {
    list.classList.add("effectt")
    mouseleftbutton = false
    hideul(e, "mouse entered button")
})

button.addEventListener("mouseleave", e => {
    mouseleftbutton = true
    hideul(e, " mouse left button")
})


listcontainer.addEventListener("mouseover", e => {
    mouseleftlistcontainer = false
    hideul(e, "mouse entered listcontainer")
})

listcontainer.addEventListener("mouseleave", e => {
    mouseleftlistcontainer = true
    hideul(e, "mouse left listcontainer")
})

.button{
    background-color: lightgreen;
    width:200px;
    height:50px;
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-top:30px;
    font-size: 25px;
}

.container{
    display: flex;
    margin:auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


ul{
    font-size: 20px;
    list-style: none;
    transform: translateY(-200px);
    transition: 0.2s all;
    
}

li{
    margin:2px;
    background-color: lightgreen;
    border-radius:5px;
    width:200px;
    display: flex;
    justify-content: center;
    align-items: center;   

}

.listcontainer{
    height:170px;
    overflow: hidden;
    background-color: red;
}

.effectt{
    transform: translateY(00px);
}

ul{
    background-color: bisque;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
    <script defer src="./script.js"></script>
</head>

<body>
    <div class="container">
        <div class="button">ONE</div>
        <div class="listcontainer">

            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
    </div>
</body>

</html>

Solution

You should put all the objects, affected by the hover effect inside a container and trigger the effect on that one, like so:

var container = document.querySelector(".btn-container")
var list = document.querySelector("ul")

var mouseincontainer = true

function hideul(show, text) {
    console.log(text);
    
    if (mouseincontainer) {
      list.classList.add("effectt")
    }
    else {
      list.classList.remove("effectt")
    }
}

container.addEventListener("mouseover", e => {
    hideul(true, "mouse entered button")
})

container.addEventListener("mouseleave", e => {
    hideul(false, " mouse left button")
})

.button{
    background-color: lightgreen;
    width:200px;
    height:50px;
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-top:30px;
    font-size: 25px;
}

.container{
    display: flex;
    margin:auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


ul{
    font-size: 20px;
    list-style: none;
    transform: translateY(-200px);
    transition: 0.2s all;
    
}

li{
    margin:2px;
    background-color: lightgreen;
    border-radius:5px;
    width:200px;
    display: flex;
    justify-content: center;
    align-items: center;   

}

.listcontainer{
    height:170px;
    overflow: hidden;
    background-color: red;
}

.effectt{
    transform: translateY(00px);
}

ul{
    background-color: bisque;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
    <script defer src="./script.js"></script>
</head>

<body>
    <div class="container">
      <div class="btn-container">
        <div class="button">ONE</div>
        <div class="listcontainer">

            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
      </div>
    </div>
</body>

</html>