Javascript 无法在鼠标悬停时打开子菜单

我想在第一张

li ie

照片上方的鼠标上打开当前菜单右侧的子菜单

我不能这样做。请帮忙。任何帮助都将不胜感激

我有这样的子菜单-

<li><a href="#"><span>Progress</span></a>
    <ul class="sub-menu">
        <li id="id2" onclick="Reports(this.id)" style="color:white;font-family: 'Open Sans',sans-serif;font-size: 14px;"><span style="margin:0px 5px; word-wrap: break-word; white-space: nowrap">photographs</span></li>
        <li id="id3" onclick="Reports(this.id)" style="color:white;font-family: 'Open Sans',sans-serif;font-size: 14px;"><span style="margin:0px 5px; word-wrap: break-word; white-space: nowrap">CORP</span></li>
        <li id="id4" onclick="Reports(this.id)" style="color:white;font-family: 'Open Sans',sans-serif;font-size: 14px;"><span style="margin:0px 5px; word-wrap: break-word; white-space: nowrap">PSU</span></li>
        <li id="id5" onclick="Reports(this.id)" style="color:white;font-family: 'Open Sans',sans-serif;font-size: 14px;"><span style="margin:0px 5px; word-wrap: break-word; white-space: nowrap">SSA</span></li>
        <li id="id6" onclick="Reports(this.id)" style="color:white;font-family: 'Open Sans',sans-serif;font-size: 14px;"><span style="margin:0px 5px; word-wrap: break-word; white-space: nowrap">RMSA</span></li>
    </ul>
</li>

---

如果要在HTML中设置侦听器，就像使用

onclick

一样，那么要查找的属性是

onmouseover

---

使用父项上的

：悬停

选择器

（）

---

此外，在演示中，我还自由地将内联样式移动到css声明中。如果子菜单在单击或悬停时打开，则应尽可能避免使用内联样式？另外，

上的
最大高度：0
。子菜单

表示元素将被隐藏。你试过什么？父级

li

是否处于相对位置？@hmble.rumble进度表上的子菜单已出现，我希望在鼠标悬停第一个li时打开另一个子菜单，即照片（它包含少量

s）

.sub-menu {
    max-height: 0;
    min-width: 100%;
    overflow: hidden;
    position: absolute;
    z-index:9999;
    /*  top: 100%;*/
    transition: max-height .5s .2s;
    -moz-transition: max-height .5s .2s;
    -o-transition: max-height .5s .2s;
    -webkit-transition: max-height .5s .2s;
}

$("li a").mouseenter(function() {
    $(".sub-menu").fadeIn();
});

$("li a").mouseout(function() {
    $(".sub-menu").fadeOut();
});

li:hover .sub-menu {
    max-height: 100%;
}