onmouseover仅显示一个子菜单（Javascript）

你好

试图用Javascript制作一个小菜单，但遇到了一个问题，onmouseover事件显示了所有子菜单，而不是一个子菜单

这是假定更改

样式的代码部分。显示

到

块

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

var ul=document.getElementById（“navMainId”），
var liDropdown=ul.getElementsByClassName（“下拉列表”）；
对于（var i=0；i

如何更改代码以使其正常工作

---

下面是关于小提琴的全部代码（很糟糕）：

我已经更新了小提琴：

你所需要做的就是改变

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

到

因此，它的目标是“this”（即您悬停的LI），而不是查找UL中的“下拉内容”

---

在onmouseleave上也可以这样做。

将以下内容添加到css部分

.dropdown-content{
      display:none ! important;
    }
    a:hover+.dropdown-content{
      display:block ! important;
    }

它会很好用的

var menuCont=document.createElement（“div”）；
document.body.appendChild（menuCont）；
var ulMain=document.createElement（“ul”）；
menuCont.appendChild（ulMain）；
ulMain.className=“navMain”；
ulMain.id=“navMainId”；
/******菜单******/
//软件
var liSoftware=document.createElement（“li”）；
liSoftware.className=“菜单下拉菜单”；
ulMain.appendChild（liSoftware）；
var aSoftware=document.createElement（“a”）；
aSoftware.className=“menuName dropbtn”；
aSoftware.href=“#”；
aSoftware.textContent=“Test1”；
附加子软件（aSoftware）；
//GeCoSoft
var liGeco=document.createElement（“li”）；
liGeco.className=“菜单下拉菜单”；
乌尔曼·佩迪奇尔德（liGeco）；
var aGeco=document.createElement（“a”）；
aGeco.className=“menuName dropbtn”；
aGeco.href=“#”；
aGeco.textContent=“Test2”；
liGeco.appendChild（aGeco）；
/*******子菜单*******/
//软件子系统
var divsubsft=document.createElement（“div”）；
divsubsft.className=“下拉内容”；
liSoftware.appendChild（divft）；
var aSub1=document.createElement（“a”），
aSub2=document.createElement（“a”）；
aSub1.className=“menuSubName”；
aSub1.textContent=“子菜单1”；
aSub1.href=“#”；
aSub2.className=“menuSubName”；
aSub2.textContent=“子菜单2”；
aSub2.href=“#”；
附属物子类（aSub1）；
附属儿童（aSub2）；
//Gecosoft Sub
var divSubGeco=document.createElement（“div”）；
divSubGeco.className=“下拉内容”；
liGeco.appendChild（Divisubgeco）；
var aSub3=document.createElement（“a”），
aSub4=document.createElement（“a”）；
aSub3.className=“menuSubName”；
aSub3.textContent=“子菜单3”；
aSub3.href=“#”；
aSub4.className=“menuSubName”；
aSub4.textContent=“子菜单4”
aSub4.href=“#”；
子公司（aSub3）；
子公司（aSub4）；
/******菜单样式******/
var i=“”；
ulMain.style.listStyleType=“无”；
ulMain.style.margin=“0px”；
ulMain.style.padding=“0px”；
ulMain.style.overflow=“隐藏”；
ulMain.style.backgroundColor=“rgb（232，225，225）”；
var ul=document.getElementById（“navMainId”），
li=ul.getElementsByTagName（“li”）；
对于（var i=0；i.dropdown-content{
      display:none ! important;
    }
    a:hover+.dropdown-content{
      display:block ! important;
    }

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