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

Question

先说下问题：
我想用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>

Answer 1

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