豎直感應鼠標的多級展開菜單

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   class="tsshhiu"   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兩級橫向布局

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注