鼠标经过展开的纵向二级菜单代码

发布时间：2018-08-20 18:30:43 所属栏目：政策来源：站长网

导读：鼠标经过展开的纵向二级菜单代码本菜单不用点击鼠标即可展开二级或更多级菜单，响应了鼠标的OnMouseOver功能。为了展示功能，因此没有过多美化，请大家自己美化吧，扩展一下功能就更不错了。 DEMO演示： htmlheadtitle竖直感应鼠标的多级展开菜单 - Liehu

　　鼠标经过展开的纵向二级菜单代码

　　本菜单不用点击鼠标即可展开二级或更多级菜单，响应了鼠标的OnMouseOver功能。为了展示功能，因此没有过多美化，请大家自己美化吧，扩展一下功能就更不错了。

　　DEMO演示：

<html> <head> <title>竖直感应鼠标的多级展开菜单 - Liehuo.Net</title> <script language="<b>Java</b>Script"> function show(a){ document.getElementById(a).style.display='block'; //显示 } function hide(a){ document.getElementById(a).style.display='none'; //隐藏 } </script> <style> #nav{font-size:12px;} #nav ul {list-style-type:none;padding:0;margin:0;} #nav ul li{line-height:22px;background:none;width:80px;text-align:center;} #nav ul li dl{display:none;padding-left:15px;*padding-left:0px} #nav ul li dl dt{line-height:22px;background:none;width:80px;text-align:center;} #nav ul li dl dt ul{display:none;padding-left:20px;} #nav ul li dl dt ul li{line-height:22px;background:none;width:80px;text-align:center;} #nav ul li a{color:#000; text-decoration:none;} #nav ul li a:hover{color:red; } </style> </head> <body> <div id="nav"> <ul> <li><a href="http://www.veryhuo.com">网站首页</a></li> <li onmousemove="show(1)" onmouseout="hide(1)"><a href="http://www.veryhuo.com/down" >源码下载</a> <dl id="1"> <dt><a href="#">ASP</a></dt> <dt><a href="#">PHP</a></dt> <dt><a href="#">JSP</a></dt> <dt><a href="#">AJAX</a></dt> </dl> </li> <li><a href="#">书籍教程</a></li> <li><a href="#">新闻资讯</a></li> <li onmousemove="show(2)" onmouseout="hide(2)"><a href="#">站长资源</a> <dl id="2"> <dt onmousemove="show(3)" onmouseout="hide(3)"><a href="#">网页特效</a> <ul id="3"> <li><a href="#">导航菜单</a></li> <li><a href="#">浏览器</a></li> <li><a href="#">层与布局</a></li> </ul> </dt> <dt><a href="#">jquery</a></dt> <dt><a href="#">mootools</a></dt> <dt><a href="#">prototype</a></dt> </dl> </li> <li><a href="#">站长休闲</a></li> <li><a href="http://www.veryhuo.com/help/fankui.html">信息反馈</a></li> </ul> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!