简易下拉菜单

今天做了一个简易的下拉菜单：

• 页面头部一个下拉菜单，鼠标滑过下拉菜单下方显示一个菜单项列表，且下拉菜单的背景图片切换；
• 鼠标可以滑入菜单列表，经过菜单项有hover效果；
• 当鼠标滑出下拉菜单及菜单列表隐藏菜单列表且还原背景图片。
  效果图如下

默认显示样式

鼠标滑过样式

html部分

 

    

    
下拉菜单
        

            
选项一
            
选项二
            
选项三
            
选项四
        
    
`

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:没有做早期浏览器的兼容。