借用鼠标指定的对象实现动态显示和隐藏菜单

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #p > li {
            list-style-type:none;
            float:left;
            80px;
            cursor:pointer;
        }
        .hide {
            display: none;
        }
        .show {
            position: absolute;
            list-style-type: none;
            display: block;
            margin: 0;
            padding: 0;
            background-color: Gray;
        }
    </style>
    <script>
        //document.getElementsByTagName
        function show(li)
        {
            var ul = l1.getElementsByTagName("ul");
            for (var i = 0; i < ul.length; i++)
            {
                //alert("执行到这了");
               // alert(ul.innerText);
                if (ul[i].className == "hide")
                {
                    ul[i].className = "show"
                }
            }
        }

    </script>
</head>
<body>
    <ul id="p">
        <li id="l1" onmousemove="show(this)">
            文件
            <ul class="hide" id="memu">
                <li>新建</li>
                <li>保存</li>
                <li>另存为</li>
                <li>退出</li>
            </ul>
        </li>

</body>
</html>