本文實例講述了JS實現超精簡響應鼠標顯示二級菜單代碼。分享給大家供大家參考。具體如下：
這是一款精簡版的二級導航菜單，響應鼠標的動作，鼠標放上即顯示出菜單，常見的一種菜單樣式。喜歡的朋友拿去修改一下，再美化一番，就夠用了。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-simple-mouse-show-menu-codes/
具體代碼如下：
<html><head><title>二級菜單，響應鼠標</title><style type="text/css">.mainNav ul li {float: left;width: 150px;}.mainNav li ul {display: none;}li.hover ul {display: block;}</style><script language="javascript" type="text/javascript"> function showSubLevel(Obj){ Obj.className="hover"; } function hideSubLevel(Obj){ Obj.className=""; }</script></head><body><div class="mainNav"> <ul> <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一級欄目A <ul> <li>A的二級欄目</li> <li>A的二級欄目</li> <li>A的二級欄目</li> </ul> </li> <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一級欄目B <ul> <li>B的二級欄目</li> <li>B的二級欄目</li> <li>B的二級欄目</li> </ul> </li> <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一級欄目C <ul> <li>B的二級欄目</li> <li>B的二級欄目</li> <li>B的二級欄目</li> </ul> </li> </ul></div></body></html>希望本文所述對大家的JavaScript程序設計有所幫助。
新聞熱點
疑難解答
