二级下拉菜单的三种实现方法——CSS 、JS、 jQuery

直接用CSS的  hover实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">课程大厅</a>
                <ul>
                    <li><a href="">javascript</a></li>
                    <li><a href="">angularJS</a></li>
                    <li><a href="">jQuery</a></li>
                </ul>
            </li>
            <li><a href="">学习中心</a>
                <ul>
                    <li><a href="">总体介绍</a></li>
                    <li><a href="">教师资源</a></li>
                    <li><a href="">学校设施</a></li>
                </ul>
            </li>
            <li><a href="">经典案例</a>
                <ul>
                    <li><a href="">淘宝网</a></li>
                    <li><a href="">百度首页</a></li>
                    <li><a href="">腾讯官网</a></li>
                </ul>
            </li>
            <li><a href="">关于我们</a></li>
        </ul>
    </div>
</body>
</html>
*{
    padding: 0;
    margin: 0;
}
#nav{
    background-color: #eee;
    width: 600px;
    height: 40px;
    margin: 0 auto;
}
ul{
    list-style: none;
}
ul li{
    float: left;
    line-height: 40px;
    text-align: center;
/*    利用定位解决二级菜单宽度过宽影响一级菜单的问题*/
    position: relative;
}
ul li a{
    padding: 0 10px;
    text-decoration: none;
    color: black;
    display:block;
    height: 40px;
}
a:hover{
    color:white;
    background-color: purple;
}
ul li ul li{
    float: none;
    background: #eee;
    margin-top: 2px;
}
ul li ul {
    /*    利用定位解决二级菜单宽度过宽影响一级菜单的问题*/
    position: absolute;
    left: 0px;
    top: 40px;
    display: none;
}
ul li ul li a{
    /*IE7兼容性*/
    width: 80px;
}
ul li ul li a:hover{
    background-color: blue;
}
ul li:hover ul{
    display: block;
}

js实现下拉二级菜单   onmouseover    　　onmouseout   样式的话和上面的差不多，删掉最后一段就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li onmouseover="show(this)" onmouseout="hide(this)"><a href="">课程大厅</a>
                <ul>
                    <li><a href="">javascript</a></li>
                    <li><a href="">angularJS</a></li>
                    <li><a href="">jQuery</a></li>
                </ul>
            </li>
            <li onmouseover="show(this)" onmouseout="hide(this)"><a href="">学习中心</a>
                <ul>
                    <li><a href="">总体介绍</a></li>
                    <li><a href="">教师资源</a></li>
                    <li><a href="">学校设施</a></li>
                </ul>
            </li>
            <li onmouseover="show(this)" onmouseout="hide(this)"><a href="">经典案例</a>
                <ul>
                    <li><a href="">淘宝网</a></li>
                    <li><a href="">百度首页</a></li>
                    <li><a href="">腾讯官网</a></li>
                </ul>
            </li>
            <li><a href="">关于我们</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        function show(li){
            var submenu=li.getElementsByTagName("ul")[0];
            submenu.style.display="block";
        }
        function hide(li){
            var submenu=li.getElementsByTagName("ul")[0];
            submenu.style.display="none";
        }
    </script>
</body>
</html>

jQuery 实现         this. children("ul")            show()      hide()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li class="navmenu"><a href="">课程大厅</a>
                <ul>
                    <li><a href="">javascript</a></li>
                    <li><a href="">angularJS</a></li>
                    <li><a href="">jQuery</a></li>
                </ul>
            </li>
            <li class="navmenu"><a href="">学习中心</a>
                <ul>
                    <li><a href="">总体介绍</a></li>
                    <li><a href="">教师资源</a></li>
                    <li><a href="">学校设施</a></li>
                </ul>
            </li>
            <li class="navmenu"><a href="">经典案例</a>
                <ul>
                    <li><a href="">淘宝网</a></li>
                    <li><a href="">百度首页</a></li>
                    <li><a href="">腾讯官网</a></li>
                </ul>
            </li>
            <li><a href="">关于我们</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".navmenu").mouseover(function(){
                $(this).children('ul').show();    
                });
            $(".navmenu").mouseout(function(){
                $(this).children('ul').hide();    
                });
            });
    </script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/webzhang/p/5000320.html