Hovering refuses to work when another element is on top

By the way, this is coming from a beginner coder, so don't expect any great amount of organization. I may have missed something obvious.

I couldn't get it to work here as a snippet (for security reasons, it won't allow images to be loaded, not even showing the failing to load icon), so I made a copy of it here.

The issue is that, while hovering over a folder, it works fine, but when I begin hovering over the menu that pops up while hovering over the folder, it starts flashing rapidly. Yes, the menu is supposed to delete itself when the user stops hovering over the folder and show when the user hovers over the folder.

HTML code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Something</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
</head>

<body>
    <!-- See CSS code for more explanation -->
    <div class="sidebar">
        <h1 style="padding: 1vw;">Todo</h1>
        <div class="folder">
            Folder 1
        </div>
        <div class="folder">
            Folder 2
        </div>
        <div class="folder">
            Folder 3
        </div>
        <div class="addBtn">+ Folder</div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS code:

/* might have something to do with css; please read my hastily made comments */

/* self explanatory */
html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: black;
}

/* sets some defaults */
* {
    padding: 0px;
    margin: 0px;
    border: 0px;
    overflow: hidden;
    font-family: Poppins;
    background-color: inherit;
}

/* sets text selection color to nothing */
*::selection {
  background: inherit;
}

/* styling for the sidebar (the part that says "todo", shows folders, etc.) */
.sidebar {
    background: #9caeb0;
    display: inline-block;
    width: calc(20% - 2vw);
    height: 100vh;
    padding: 1vw;
}

/* the text that says todo */
h1 {
    font-size: 30px;
    font-weight: 700;
}

/* a folder. */
.folder {
    width: calc(15.4vw);
    background-color: #8c9ca3;
    padding: .6vw;
    padding-left: 1.25vw;
    padding-right: 1.25vw;
    border-radius: 0px 5px 5px 0px;
    font-weight: 200;
    cursor: pointer;
    transition: .45s;
    margin: .6vw;
    margin-left: -1vw;
    margin-right: calc(0vw);
    font-size: 15px;
    position: relative;
}

/* uses css animations to change the folder upon hovering */
.folder:hover {
    background-color: #75828a;
    cursor: pointer;
    margin-top: .8vw;
    margin-bottom: .8vw;
    margin-left: -2vw;
    padding-left: 2.25vw;
    width: 15.8vw;
    font-size: 17px;
}
/* the add folder button */
.addBtn {
    width: 15.4vw;
    background-color: rgba(0,0,0,0);
    padding: .6vw;
    padding-left: 1.25vw;
    padding-right: 1.25vw;
    border-radius: 0px 5px 5px 0px;
    font-weight: 200;
    cursor: pointer;
    transition: .45s;
    margin-left: -1vw;
    font-size: 15px;
    
    border: 3px solid #8c9ca3;
    border-left: 0;

    /*position: absolute;
    bottom: 4vh;*/
}

/* changes bg color upon hovering over add folder button */
.addBtn:hover {
    background-color: #8c9ca3;
}

.smallMenu {
    position: absolute;
    height: 17px;
    top: 50%;
    width: 17px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0.5vw;
    border-radius: 99px;
}

.menuBtn {
    position: absolute;
    height: 14px;
    top: 1.5px;
    left: 7px;
    padding: 0px;
    margin: 0px;
}

JS Code:

// probably can ignore these functions; scroll down to line 45; there's a lot of code here for purposes that I haven't quite finished yet
function inLocalStorage(item) {
    if(!localStorage.getItem(item)) {
        return false;
    } else {
        return true;
    }
}

function lsAdd(label,value) {
    localStorage.setItem(label, value);
}

function lsGet(item) {
    return localStorage.getItem(item);
}

function lsClear() {
    localStorage.clear();
}

function lsRemove(item) {
    localStorage.removeItem(item);
}

var el;
var mouseOver = false;

// checks if the user has visited
if (!inLocalStorage('visited')) {
    alert("Don't mind this alert");
    lsAdd('visited','yes');
    lsAdd('folders','1');
    lsAdd('js','');
} else {
    // load from local storage; execute stored JS
    new Function(lsGet('js'))();

    // upon mouseover of folder, show mini menu icon
    for (let i = 0; i < document.getElementsByClassName("folder").length; i++) {
        document.getElementsByClassName("folder")[i].addEventListener("click", function() {
            console.log("You have clicked.");
        });

        // add menu upon mouseover
        document.getElementsByClassName("folder")[i].addEventListener("mouseover", function() {
            mouseOver = false;
            el = document.createElement("div");
            // this image obviously doesn't load but that's not important; the image is an svg with three vertical dots, and the image is transparent
            el.innerHTML = '<div class="smallMenu"><img src="abc.svg" class="menuBtn" style="height:14px;"></div>';
            el.setAttribute("id","menu");
            document.getElementsByClassName('folder')[i].appendChild(el);

            el = document.getElementsByClassName('smallMenu')[0];
            
            el.addEventListener('mouseover', function() {
                mouseOver = true;
                console.log(mouseOver);
            });
            
            el.addEventListener('mouseout', function() {
                mouseOver = false;
                console.log(mouseOver);
            });
            

        });

        // remove menu upon mouse out
        document.getElementsByClassName("folder")[i].addEventListener("mouseout", function() {
            if (mouseOver === false) {
                el = document.getElementById("menu");
                el.remove();
            }
        });
    }
}