js實作下拉菜單

效果:

<a href="http://s1.51cto.com/wyfs02/M01/84/7A/wKiom1eRvlbwsgVbAAAQmTR7b_I949.png-wh_500x0-wm_3-wmp_4-s_1374826758.png" target="_blank"></a>

代碼:

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;js實作下拉清單&lt;/title&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

&lt;style type="text/css"&gt;

*{margin: 0px;padding: 0px}

.nav{background-color: #eee;width: 600px;height: 40px;margin: 0 auto;}

.nav-ul{list-style: none;}

.nav-ul li{float: left;line-height: 40px;text-align: center;position: relative;}

.nav-ul li a {text-decoration: none;color: #000;display: block;padding:0 10px;}

.nav-ul li a:hover{color: #FFF;background-color: #666}

.nav-ul li .nav-ul-li-ul{position: absolute;left: 0px; top:40px;display: none;}

.nav-ul li .nav-ul-li-ul li {list-style: none; float: none;background-color: #eee;margin-top: 2px;}

.nav-ul li .nav-ul-li-ul li a:hover{color: #FFF;background-color: #36e}

&lt;/style&gt;

&lt;script type="text/javascript"&gt;

/*

滑鼠離開事件

*/

function hidesubment (li) {

//擷取子菜單對象

var submenuobj = li.getElementsByClassName("nav-ul-li-ul")[0];

//設定顯示的屬性

submenuobj.style.display = "none";

}

滑鼠經過事件

function showsubmenu (li) {

//擷取對象

submenuobj.style.display = "block";

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div class="nav"&gt;

&lt;ul class="nav-ul"&gt;

&lt;li&gt;&lt;a href=""&gt;首頁&lt;/a&gt;&lt;/li&gt;

&lt;li onmouseout="hidesubment(this)"&gt;

&lt;a href=""&gt;我的課程&lt;/a&gt;

&lt;ul class="nav-ul-li-ul"&gt;

&lt;li&gt;&lt;a href=""&gt;java&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href=""&gt;php&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/li&gt;

&lt;li&gt;&lt;a href=""&gt;關于我們&lt;/a&gt;&lt;/li&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

本文轉自  素顔豬  51CTO部落格，原文連結:http://blog.51cto.com/suyanzhu/1828789