借用鼠标指定的对象实现动态显示和隐藏菜单
<!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;
width: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>
<li>
编辑
<ul class="hide" id="memu">
<li>新建</li>
<li>保存</li>
<li>另存为</li>
<li>退出</li>
</ul>
</li>
<li>
插入
<ul class="hide" id="memu">
<li>新建</li>
<li>保存</li>
<li>另存为</li>
<li>退出</li>
</ul>
</li>
<li>
窗体
<ul class="hide" id="memu">
<li>新建</li>
<li>保存</li>
<li>另存为</li>
<li>退出</li>
</ul>
</li>
<li>
帮助
<ul class="hide" id="memu">
<li>新建</li>
<li>保存</li>
<li>另存为</li>
<li>退出</li>
</ul>
</li>
</ul>
</body>
</html>
