基于js滑出式菜单

css

<style>
        body{
            margin: 0;
            padding: 0;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #nav{
            height: 35px;
            width: 100%;
            background: #999;
        }
        ul{
            width: 600px;
            list-style: none;
            margin: auto;
        }
        .menu{
            position: relative;
            float: left;
            width: 100px; 
            line-height: 35px;
            height: 35px;
            text-align: center;
        }
        .subMenu{
            display: none;
            border: 1px solid #ccc;
        }
        .last{
            border-bottom: 0;
        }
        a{
            color: #000;
            text-decoration: none;
        }
    </style>

js

<script>
        window.onload = function(){
            var menu = document.getElementById("nav").getElementsByClassName("menu")
            for(i=0;i<menu.length;i++){//遍历导航栏的列表项
                menu[i].onmouseover = function(){
                    this.style.background = "#fff"//鼠标悬停后，菜单背景颜色变为白色
                    var list = document.getElementsByTagName("ul")[0].getElementsByTagName("li")
                    this.getElementsByTagName("ul")[0].style.display = "block"//悬停后滑出二级菜单
                    this.getElementsByTagName("ul")[0].style.width = "98px"//设置子菜单的宽度
                    this.getElementsByTagName("ul")[0].style.position = "absolute"//对子菜单进行定位
                    for(var i = 0;i<list.length;i++){
                        list[0].onmouseover = function(){
                            this.style.background="#fff"
                        }
                    }
                }
                menu[i].onmouseout = function(){
                    this.style.background="#999"//鼠标移除后，背景还原成灰色
                    this.getElementsByTagName("ul")[0].style.display="none"//鼠标离开以后，二级菜单再次隐藏
                }
            }
        }
    </script>

HTML

<div id="nav">
            <ul>
                <li class="menu">菜单选项1
                <ul class="subMenu">
                    <li><a href="">菜单选项11</a></li>
                    <li class="last"><a href="">菜单选项12</a></li>
                </ul>
            </li>
            <li class="menu">菜单选项2
                <ul class="subMenu">
                    <li><a href="">菜单选项21</a></li>
                    <li class="last"><a href="">菜单选项22</a></li>
                </ul
            </li>
            <li class="menu">菜单选项3
                <ul class="subMenu">
                    <li><a href="">菜单选项31</a></li>
                    <li class="last"><a href="">菜单选项32</a></li>
                </ul
            </li>
            <li class="menu">菜单选项4</li>
            <li class="menu">菜单选项5</li>
            <li class="menu">菜单选项6</li>
            </ul>
        </div>