How to make it on pure js so that when you hover over 1 element, the rest have the same changes?

Question

css

There is a hamburger laid out by divs
and you need to write a js script that will change the color to red for all 3 at the same time when you hover over any of them with the mouse
. You can’t use any jquery-type frameworks, only pure js and css.
My attempts were unsuccessful, and this is 9 hours of man time, that's why I came to you so that someone smart would call me stupid and tell me how to do it in a couple of minutes, thanks in advance :)

<div class="menu">
            <div></div>
            <div></div>
            <div></div>
        </div>

.menu {
    float: right;
    padding: 8px 20px 0 0;
}
.menu div{
    border-radius: 4px;
    height: 13px;
    width: 66px;
    background-color: white;
    margin-bottom: 8px;
}

var x = document.querySelectorAll(".menu > div");
        x.addEventListener("onmouseover", myFunction);
        function myFunction() {
            document.querySelectorAll(".menu > div").style.backgroundColor = "red";
        }

Answer 1

For example:
we find the menu on the page, find these "pieces of a hamburger", on each of them we hang the handler
https://jsfiddle.net/tke4bx2w/
even easier and without js. It is enough to write in css .menu:hover https://jsfiddle.net/tke4bx2w/1/