竖直感应鼠标的多级展开菜单

2024-09-05 12:20:39

字体：大中小

来源：转载

供稿：网友

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

<html><head><title>竖直感应鼠标的多级展开菜单</title><script language="JavaScript">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>网站首页</li>        <li  onmousemove="show(1)" onmouseout="hide(1)">源码下载              <dl id="1">                    <dt>ASP</dt>                    <dt>PHP</dt>                    <dt>JSP</dt>                    <dt>AJAX</dt>              </dl>        </li>        <li>书籍教程</li>        <li>新闻资讯</li>        <li onmousemove="show(2)" onmouseout="hide(2)">站长资源             <dl id="2">                   <dt onmousemove="show(3)" onmouseout="hide(3)">网页特效                            <ul id="3">                            <li>导航菜单</li>                            <li>浏览器</li>                            <li>层与布局</li>                            </ul>                   </dt>                    <dt>jquery</dt>                    <dt>mootools</dt>                    <dt>prototype</dt>              </dl>        </li>        <li>站长休闲</li>        <li>信息反馈</li>    </ul></div></body></html>

上一篇：泡沫弹出框式的侧边导航菜单

下一篇：网站导航菜单，JS两级横向布局