<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.out{display: none;}
.over{
list-style: none;
position: absolute;
left: 10px;
top:33px;
border-bottom: 3px #036 solid;
display: block;
}
</style>
<script type="text/javascript">
function getById(id) {
return document.getElementById(id);
}
function listToggle() {
var pro=getById("id1");
var dis=pro.getAttribute('dis');
if(dis=='out') {
pro.className='over';
pro.setAttribute('dis','over')
} else if(dis=='over') {
pro.className='out';
pro.setAttribute('dis','out')
}
}
</script>
</head>
<body>
<!--当鼠标移动到"公司产品"文字上后,显示出下面的分类菜单-->
<ul class="navul">
<!--onmouseover,onmouseout事件中通过改变id1的className来改变ul元素样式-->
<li οnclick="listToggle()">公司产品</li>
<ul id="id1" class="out" dis="out">
<li><a href="#">百度</a></li>
<li><a href="#">谷歌</a></li>
<li><a href="#">bing</a></li>
<li><a href="#">有道</a></li>
<li><a href="#">狗狗</a></li>
</ul>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
