onmouseover只显示一个子菜单(Javascript)

美好的一天,

试图只使用Javascript创建一个小菜单,并遇到一个问题,onmouseover事件显示所有子菜单,而不仅仅是一个.

这是假设要更改style.display为的代码的一部分 block.

var ul = document.getElementById("navMainId"),
var liDropdown = ul.getElementsByClassName("dropdown");

for (var i = 0; i < liDropdown.length; i++) {
    liDropdown[i].style.display = "inline-block";

    liDropdown[i].onmouseover = function () {
        var ul = document.getElementById("navMainId"),
            dropdown = ul.getElementsByClassName("dropdown-content");


        for (var i = 0; i < dropdown.length; i++) {
            dropdown[i].style.display = "block";                
        }
    }
    liDropdown[i].onmouseleave = function () {
        var ul = document.getElementById("navMainId"),
            dropdown = ul.getElementsByClassName("dropdown-content");

        for (var i = 0; i < dropdown.length; i++) {
            dropdown[i].style.display = "none";
        }
    }
}

如何更改代码以使其工作？

这里是关于Fiddle的完整代码(ssry它是一团糟):https://jsfiddle.net/apvsnzt5/1/

我已经更新了小提琴:

https://jsfiddle.net/apvsnzt5/3/

你需要做的就是改变

        dropdown = ul.getElementsByClassName("dropdown-content");

至

        dropdown = this.getElementsByClassName("dropdown-content");

因此,它针对的是"这个"(你正在徘徊的LI),而不是在UL内部找到"下拉内容".

也可以在onmouseleave上做.