标签：style class ext color width int
<!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>
借用鼠标指定的对象实现动态显示和隐藏菜单,布布扣,bubuko.com
标签：style class ext color width int
原文地址：http://www.cnblogs.com/shangguanjinwen/p/3709900.html
