导航栏Navigator

自定义了导航栏，改成了黑色背景 和 鼠标悬停展示子菜单

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="${base}"><span class="ux-logo">JeeWeiXin</span></a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="${base}">Java编程</a></li>
                <li><a href="${base}">小程序编程</a></li>
                <li><a href="${base}">Spring编程</a></li>
                <li><a href="${base}">前端编程</a></li>
                <li><a href="${base}">源码下载</a></li>
                <li><a href="${base}">软件工具</a></li>
                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropdown-toggle" >
                        Java笔试面试 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="${base}">面试技巧篇</a></li>
                        <li class="divider"></li>
                        <li><a href="${base}">Java八股文</a></li>
                        <li><a href="${base}">Spring系列</a></li>
                        <li><a href="${base}">MyBatis系列</a></li>
                        <li class="divider"></li>
                        <li><a href="${base}">机试编程</a></li>
                        <li><a href="${base}">JVM系列</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropdown-toggle" >
                        更多 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="${base}">小程序开发</a></li>
                        <li><a href="${base}">MySQL</a></li>
                        <li><a href="${base}">Git和SVN</a></li>
                        <li><a href="${base}">Maven</a></li>
                        <li><a href="${base}">CentOS建站</a></li>
                        <li><a href="${base}">jeeweixin项目</a></li>
                        <li><a href="${base}">GitHub收藏</a></li>
                        <li><a href="${base}">编程副业赚钱</a></li>
                        <li><a href="${base}">wiki导航</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>
</nav>

<script type="text/javascript">
    $(function(){
        hoverDropdown();//菜单悬停展开,(去掉data-toggle="dropdown")
    })
    
    function hoverDropdown(){
        $('.dropdown').mouseover(function(){
            $(this).addClass('show');
            $(this).find(".dropdown-menu").addClass('show');
        }).mouseout(function(){
            $(this).find(".dropdown-menu").removeClass('show');
            $(this).removeClass('show');
        });
    }
</script>

<style type="text/css">

    .container-fluid{
        padding-left:80px;
        padding-right:80px;
    }

    .ux-logo{
        font-size: 24px;
        color: #FFF;
        letter-spacing: 1px;
    }

    .dropdown-menu > li > a:hover,:focus{
        text-decoration: none;
        color: #FFF;
        background-color: #3D3D3D;
    }

    .dropdown-menu > a:hover,:focus{
        text-decoration: none;
        outline: 0;
        color: #FFF;
        background-color: #3D3D3D;
    }
    
</style>