今天做了一个简易的下拉菜单：
- 页面头部一个
下拉菜单，鼠标滑过下拉菜单下方显示一个菜单项列表，且下拉菜单的背景图片切换； - 鼠标可以滑入菜单列表，经过菜单项有hover效果；
- 当鼠标滑出
下拉菜单及菜单列表隐藏菜单列表且还原背景图片。
效果图如下
默认显示样式
鼠标滑过样式
html部分
<header class="header">
<div class="logo"><img src="imgs/logo.png" alt="logo.png"></div>
<div class="menu">下拉菜单
<ul class="menuList">
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
<li><a href="#">选项四</a></li>
</ul>
</div>
</header>`
PS:因为鼠标事件是添加在下拉菜单中class="menu"的div上的，所以下拉列表ul要放在下拉菜单的div容器里，否则鼠标无法进入ul的菜单项列表中。
css部分
* {margin:0; padding:0; }
body {font-size:14px; color:#333; }
.header {width: 980px; height:50px; margin: 0 auto; background-color: #efefef; border-radius: 0 0 5px 5px; }
.header .logo {float:left; }
.header .logo img {height: 50px; }
.header .menu {width:70px; height:50px; line-height:50px; padding-right: 5px; float:right; background:url(imgs/arrow1.png) no-repeat 60px center; cursor:pointer; position: relative; }
.header .menuList {position:absolute; top:50px; left: -17px; width:90px; height:110px; border:1px solid #ccc; border-top:none; padding:10px 0 0 0; display:none; }
.header .menuList li {list-style: none; height:25px; line-height:25px; text-indent:1.5em; letter-spacing:2px; }
.header .menuList li a {display:block; text-decoration:none; color:#333; }
.header .menuList li a:hover {background-color: #eee; text-decoration: underline; }`
PS:下拉列表ul设置绝对定位，其上一层父元素class="menu"的div要设置相对定位，即ul相对div定位，这样就不会因为浏览器窗口大小变化而发生错误。
js部分
window.onload = function () {
var
//获取下拉菜单的div
menu = document.getElementsByClassName("menu")[0],
//获取下拉菜单列表
menuList = document.getElementsByClassName("menuList")[0];
//DOM2级方法添加鼠标划过事件
menu.addEventListener("mouseover",function(){
//通过css设置下拉菜单列表显示
menuList.style.display = "block";
//通过css设置下拉菜单div改变背景图片
menu.style.background = "url(imgs/arrow2.png) no-repeat 60px center";
});
//DOM2级方法添加鼠标划出事件
menu.addEventListener("mouseout",function(){
//通过css设置下拉菜单列表显示
menuList.style.display = "none";
//通过css设置下拉菜单div恢复背景图片
menu.style.background = "url(imgs/arrow1.png) no-repeat 60px center";
});
};
PS:没有做早期浏览器的兼容。
