js 简单的类下拉菜单特效

最新推荐文章于 2022-08-11 18:34:07 发布

lvzk555

最新推荐文章于 2022-08-11 18:34:07 发布

阅读量544

点赞数

本文链接：https://blog.csdn.net/lvzk555/article/details/7287471

版权

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
	display:none;
	}
ul{ list-style-type:none;
background-color#CCC;
margin-left:1px;
margin-right:1px;
margin-top:-3px;
margin-bottom:0px;
 
	
	}
</style>
<script language="javascript" type="text/javascript">
function Show(dnum){
	document.getElementById(dnum).style.display="block";
	}
function Hidden1(dnum){
	document.getElementById(dnum).style.display="none";
	}
//下拉和收回的类	
</script>

<body>

<table width="520px" border="0px " >
<tr align="center" bgcolor="#FF3300">
<td οnmοusemοve="Show(1)" οnmοuseοut="Hidden1(1)"  width="125px"><span><a href="#">A 类</a></span>
</td >
<td οnmοusemοve="Show(2)" οnmοuseοut="Hidden1(2)" width="125px"><span><a href="#">B 类</a></span>
</td>
<td οnmοusemοve="Show(3)" οnmοuseοut="Hidden1(3)" width="125px"><span><a href="#">C 类</a></span>
</td>
<td οnmοusemοve="Show(4)" οnmοuseοut="Hidden1(4)" width="125px"><span><a href="#">D 类</a></span>
</td>
</tr>
//onmousemove与onmouseout设置鼠标移动触发事件
<tr align="center">
<td  οnmοusemοve="Show(1)" οnmοuseοut="Hidden1(1)">
<div id="1">
<ul>
<li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li><li><a href="#">444</a></li></ul>
</div>

</td>
<td οnmοusemοve="Show(2)" οnmοuseοut="Hidden1(2)">
<div id="2" >
<ul>
<li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li><li><a href="#">444</a></li></ul>
</div>
</td>
<td  οnmοusemοve="Show(3)" οnmοuseοut="Hidden1(3)">
<div id="3">
<ul>
<li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li><li><a href="#">444</a></li></ul>
</div >
</ul>
</td>
<td οnmοusemοve="Show(4)" οnmοuseοut="Hidden1(4)">

<div id="4">
<ul>
<li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li><li><a href="#">444</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>