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