Javascript多级下拉菜单

HTML代码：

<ul class="nav-menu">   
<li id="no" onmouseover="dropDown()" onmouseout="reverseDropDown()">
    <a href="#" >Birds</a>
    <ul class="menu">
        <li id="no2" ><a href="#" onmouseover="dropDown2()" onmouseout="reverseDropDown2()">Ratites</a>
                <ul class="submenu">
        <li><a href="">Ratites</a></li>
        <li><a href="">Fowl</a></li>
        <li><a href="">Neoaves</a></li>
    </ul>
        </li>
        <li><a href="">Fowl</a></li>
        <li><a href="">Neoaves</a></li>
    </ul>
</li>
    <li id="no" onmouseover="dropDown()" onmouseout="reverseDropDown()">
    <a href="#">Dogs</a>
    <ul class="menu">
        <li><a href="">Big</a></li>
        <li><a href="">Red</a></li>
        <li><a href="">Noizy</a></li>
    </ul>
</li>

Javascript代码：

 function dropDown() {
var submenu = document.getElementById('no').getElementsByClassName('menu')[0];



    submenu.style.display="block";

}


function reverseDropDown(){

  var submenu = document.getElementById('no').getElementsByClassName('menu')[0];
    submenu.style.display="none";
}

 function dropDown2() {
    var submenu = document.getElementById('no2').getElementsByClassName('submenu')[0];



        submenu.style.display="block";

    }

function reverseDropDown2(){

  var submenu = document.getElementById('no2').getElementsByClassName('submenu')[0];
    submenu.style.display="none";
}

JSFiddle：

我想使用javascript制作一个多级下拉菜单（不使用jquery之类的库，也不使用css hover属性等）

我已经尝试了很多方法，这是最后一个，我无法让它工作。有人能帮我解释一下和/或指导一下吗。因为我用谷歌搜索了一次，除了使用纯CSS或JQuery的菜单外，什么都找不到

---

谢谢。

首先：您应该真正使用事件处理程序。将逻辑与代码分离（将所有js移动到外部文件中）

我对其进行了一些修改，以反映一种可能性（更改了HTML、JS、CSS）：

完整代码在这里

最重要的是，停止触发父A-tags：将onclick函数放在链接上，而不是它的父li上

function dropDown(a) {
    var li = a.parentElement,
        submenu = li.getElementsByTagName('ul')[0];

    submenu.style.display = submenu.style.display == "block" ? "none" : "block";

    return false;
}

---

…你为什么不想使用CSS hover？你的小提琴在Firefox中可以工作？你还想让它做什么？@JoeSwindell它不能正常工作。例如，如果在第二个链接

Dogs

上移动鼠标，它将不会显示正确的子菜单。以及子菜单的问题。我可以问一下，为什么返回

false

？以停止触发链接的默认行为，使其忽略“href”的内容。实际上，onclick必须返回

false

——我只是传递它。

function dropDown(a) {
    var li = a.parentElement,
        submenu = li.getElementsByTagName('ul')[0];

    submenu.style.display = submenu.style.display == "block" ? "none" : "block";

    return false;
}