简易下拉

方法1：原生js代码 
    window.onload = function(){
        var lis = document.getElementById("menu").getElementsByTagName("li");
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseover = function () {
                this.className+=(this.className.length>0?" ":"")+"active";
            };//交集选择器的应用
            lis[i].onmouseout = function () {
                this.className=this.className.replace("active","");
            };//将className为active的清除，就用replace方法，用一个空串来替换active
        }
    }
    方法2：jquery代码
     $(function(){
        $("#menu ul li").hover(function () {
                    $(this).children("ul").css("display","block");
                },
                function () {
                    $(this).children("ul").css("display","none");
                })
    })
    html代码
    <div id="menu">
    <ul>
        <li><a href="#">div+css</a>
            <ul>
                <li><a href="#">二级导航列表1</a></li>
                <li><a href="#">二级导航列表2</a></li>
                <li><a href="#">二级导航列表3</a></li>
                <li><a href="#">二级导航列表4</a></li>
            </ul>
        </li>
        <li><a href="#">Java</a>
            <ul>
                <li><a href="#">二级导航列表1</a></li>
                <li><a href="#">二级导航列表2</a></li>
                <li><a href="#">二级导航列表3</a></li>
                <li><a href="#">二级导航列表4</a></li>
            </ul>
        </li>
        <li><a href="#">net</a>
            <ul>
                <li><a href="#">二级导航列表1</a></li>
                <li><a href="#">二级导航列表2</a></li>
                <li><a href="#">二级导航列表3</a></li>
                <li><a href="#">二级导航列表4</a></li>
            </ul>
        </li>
        <li><a href="#">php</a>
            <ul>
                <li><a href="#">二级导航列表1</a></li>
                <li><a href="#">二级导航列表2</a></li>
                <li><a href="#">二级导航列表3</a></li>
                <li><a href="#">二级导航列表4</a></li>
            </ul>
        </li>
    </ul>
    </div>

    css代码
       *{
            padding:0;
            margin: 0;
        }
        #menu ul{
            width: 600px;
        }
        #menu ul li{
            width: 120px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            float:left;
            background-color: blue;
            margin-right: 10px;
            border-bottom: 1px solid black;
            list-style:none;
        }
        #menu ul li a{
            color:white;
            text-decoration:none;
            display: block;
        }
        #menu ul li a:hover{
            background-color: red;
        }
        #menu ul li ul{
            display:none;
        }
        #menu ul li.active ul{
            display: block;
        }//设置隐藏的ul显示的条件就是添加一个交集选择器，当ul的父级加上一个类名时，此时的条件促使ul从隐藏到显示。
        #menu ul li ul li{
            float: none;
        }
        #menu ul li ul li a:hover{
            background-color: black;
        }