使用jQuery实现鼠标移入展开导航的二级菜单栏

1、首先写出html结构（举个例子）

  <div class="nav">
        <ul>
            <li>
                <a href="#">全国导航</a>
                <ul class="nav_meun">
                    <li><a href="#">四川省</a></li>
                    <li><a href="#">吉林省</a></li>
                    <li><a href="#">湖南省</a></li>
                    <li><a href="#">云南省</a></li>
                    <li><a href="#">江苏省</a></li>
                    <li><a href="#">福建省</a></li>
                </ul>
            </li>
            <li><a href="#">工作动态</a></li>
            <li><a href="#">图片新闻</a></li>
            <li><a href="#">全省导航</a>
                <ul class="nav_meun">
                    <li><a href="#">成都市</a></li>
                    <li><a href="#">雅安市</a></li>
                    <li><a href="#">内江市</a></li>
                    <li><a href="#">巴中市</a></li>
                    <li><a href="#">广元市</a></li>
                    <li><a href="#">重庆市</a></li>
                </ul>
            </li>
            <li><a href="#">网站管理</a></li>
        </ul>
    </div>

2、然后根据个人喜好设置样式，编写css代码

   <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        /* 一级菜单 */
        .nav {
            background-color: #b7090a;
            height: 50px;
            line-height: 50px;
            position: relative;
        }

        .nav>ul>li {
            float: left;
            text-align: center;
            font-size: 18px;
            width: 300px;
            margin: 0 20px;
        }

        .nav>ul>li:first-child {
            margin-left: 0;
        }


        .nav>ul>li a {
            color: #fff;
        }

        .nav>ul>li:hover {
            background-color: #fff
        }

        .nav>ul>li:hover>a {
            color: #b7090a;
        }

        /* 子菜单 */
        .nav_meun {
            position: absolute;
            left: 0;
            width: 100vw;
            box-sizing: border-box;
            display: none;
        }

        .nav_meun>li {
            float: left;
            width: 200px;
            background-color: #eee;
            margin: 10px;
            height: 40px;
            line-height: 40px;
            padding: 0 5px;
            font-size: 16px;
        }

        .nav .nav_meun>li>a {
            color: #000;
            font-weight: 700;
        }

        .nav .nav_meun>li:hover {
            background-color: #b7090a;
        }

        .nav .nav_meun>li:hover a {
            color: #fff;
        }
    </style>

3、最后通过jQuery的show()和hide()方法实现

  <script>
        $('.nav>ul>li').mouseover(function () {
            $(this).children(".nav_meun").show();
        });
        $('.nav>ul>li').mouseout(function () {
            $(this).children(".nav_meun").hide();
        });
    </script>

注意：使用jQuery方法的前提是引入jQuery文件

 <script type="text/javascript" src="jquery.js"></script>