响应式一级到三级导航

首先放一个源代码效果贴图 如下所示（文字部分打入马赛克）：

第一步：插入meta标签，也就是bootstrap响应式经常用到的作用于手机端的meta标签，代码如下所示：

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

第二步：引入文件所需的css样式代码，如下所示（第1行和第2行代码务必引入，这是设置响应式bootstrap图标库和字体用的，第3行那就是bootsnav本身所自带的插件样式）：

bootsnav.css从百度搜索方可下载，或者点击链接https://download.csdn.net/download/tets_java/10018188?web=web进行下载。

<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
3 <link rel="stylesheet" type="text/css" href="css/bootsnav.css">

第三步：在body里边写入html代码，代码部分如下所示：

HTML代码如下所示：

<div class="demo" style="padding: 2em 0;">
    <div class="container">
        <div class="row">
<div class="col-md-2 col-xs-6 logo"><a href="index.html"><img src="images/LOGO.png"  /></a></div>
            <ul class="col-md-10 nva-list clearfix mhide">
                <li class="active"><a href="index.html">首页</a></li>
                <li class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">关于中融</a>
                    <ul class="dropdown-menu">
                        <li><a href="html/about_zr.html">企业文化</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">项目简介</a>
                    <ul class="dropdown-menu">
                        <li><a href="html/hjy_project.html">红军源</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">新闻动态</a>
                    <ul class="dropdown-menu">
                        <li><a href="html/news_infor.html">新闻资讯</a></li>
                        <li><a href="html/City_news.html">社会新闻</a></li>
                    </ul>
                </li>
                <li><a href="html/public_activities.html">公益活动</a></li>
                <li><a href="html/about_me.html">关于我们</a></li>
                <li><img src="images/tel.png"><span>000-000-000</span></li>
            </ul>
            <div class="mshow m col-xs-6 text-right">
                <i class="fa fa-bars minimune muneopen"></i>
                <i class="fa fa-times minimune muneclose"></i>
            </div>
        </div>
    </div>

第四步：写入行内样式css代码如下所示：

CSS代码：

    <style type="text/css">
    body{ background-color:hsla(0,0%,18%,1.00)}
    .jq22-header h1{ text-align:center; font-size:28px; color:#939393}
        .navbar-brand{
            padding: 29px 15px;
            height: auto;
        }
        nav.navbar.bootsnav{
            border: none;
            margin-bottom: 150px;
        }
        .navbar-nav{
            float: left;
        }
        nav.navbar.bootsnav ul.nav > li > a{
            color: #474747;
            text-transform: uppercase;
            padding: 30px;
        }
        nav.navbar.bootsnav ul.nav > li:hover{
            background: #f4f4f4;
        }
        .nav > li:after{
            content: "";
            width: 0;
            height: 5px;
            background: #34c9dd;
            position: absolute;
            bottom: 0;
            left: 0;
            transition: all 0.5s ease 0s;
        }
        .nav > li:hover:after{
            width: 100%;
        }
        nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
            content: "+";
            font-family: 'FontAwesome';
            font-size: 16px;
            font-weight: 500;
            position: absolute;
            top: 35%;
            right: 10%;
            transition: all 0.4s ease 0s;
        }
        nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
            content: "f105";
            transform: rotate(90deg);
        }
        .dropdown-menu.multi-dropdown{
            position: absolute;
            left: -100% !important;
        }
        nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            border: none;
        }
        @media only screen and (max-990px){
            nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,
            nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }
            .dropdown-menu.multi-dropdown{ left: 0 !important; }
            nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }
            nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }
        }
    </style>

第五步：写入所需的三个js代码，可以百度搜索jquery插件和bootstrap的js，包括bootsnav.js：

JS代码：

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

希望能够帮助看到这篇帖子的每个技术小伙伴。加油哦！