JS制作二级菜单的问题，我使用的innerHTML

问题描述：

先说下问题：
我想用JS的innerHTML添加二级菜单，所以在一级菜单后面加了一个空的div标签
，然后innerHTML加入内容，并在

标记中加入onmouseover和onmouseout
事件。两段代码如下。
现在的问题是鼠标点了“我的京东”后二级菜单出现，但是，离开二级菜单一直在那挂着，不消失，不知道是因为什么？
求懂得朋友解答！！
另您给解答后，再给说下您感觉比较好的添加二级菜单的方法，10C币奉上，不甚感谢。

<li class="li_c li_me" onmouseover="myMouse();" onmouseout="myMouseOut();"><a href="#">我的京东</a><div id="myid" ></div></li>

js代码：

<script type="text/javascript">
        function $(id){return document.getElementById(id);}  //这个里面的id没带“”引号
        function myMouse()
        {
        $("myid").innerHTML="<table><tr><td><a href=\"#\">我的京豆</a></td><td><a href=\"#\">我的白条</a></td></tr><tr><td><a href=\"#\">返修进度</a></td><td><a href=\"#\">我的会员</a></td></tr></table>";
        $("myid").style.position="absolute"; //html中的属性=后面是属性值，属性值要加双引号""
        $("myid").style.width="120px";
        $("myid").style.height="60px";
        $("myid").style.display="block";

        }
        function myMouseOut(){
            $("myid").style.display="none";

        }   
    </script>

答

你的代码逻辑上有问题，因为依靠onmouseout会出现二级菜单出来，离开一级菜单，一级菜单消失。
参考 https://blog.csdn.net/SmileRM/article/details/78835389

答

不消失的原因是没有触发到onmouseout，鼠标经过没问题，鼠标离开事件只在li上，审查元素你会发现你新加的内容没有占据li的空间，所以鼠标放到二级菜单再离开执行不上onmouseout，所以不消失，如果你只是需要鼠标经过显示的效果的话，你完全可以通过CSS实现

.li_c  #myid{display: none;}
.li_c:hover  #myid{display: block;}
#myid:hover{display: block;}

加上这样的CSS，不用通过JS去控制他的展示隐藏了，另外二级菜单的样式也直接写进样式表，不用写在JS了

JS制作二级菜单的问题，我使用的innerHTML

相关推荐