navbar-collapse 不覆盖正文内容

Question

这是我的代码笔：https://codepen.io/anon/pen/EvVNjz

这是我的 HTML 的导航部分：

<nav class="navbar">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" 
                    data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">
                <img class="img-responsive" src="~/images/2040_Logo_Nav_255x160.jpg" alt="2040 Logo" /></a>
        </div>  
        <div id="navbar" class="navbar-collapse collapse">
            <div class="row navRow1">
                <ul class="nav navbar-nav floatRight">
                    <li><a class="icons" target="_blank" href="https://www.facebook.com/2040PartnersforHealth">
                        <img src="~/images/_Layout_Images/icon_facebook.png" class="img-responsive center-image" /></a></li>
                    <li><a class="icons" target="_blank" href="https://twitter.com/2040Health">
                        <img src="~/images/_Layout_Images/icon_twitter.png" class="img-responsive center-image" /></a></li>
                    <li><a class="icons" href="mailto:admin@2040partnersforhealth.org">
                        <img src="~/images/_Layout_Images/icon_mail.png" class="img-responsive center-image" /></a></li>
                    <li><a class="icons" href="tel:7202160075">
                        <img src="~/images/_Layout_Images/icon_phone.png" class="img-responsive center-image" /></a></li>
                </ul>
            </div>

            <div class="row navRow2">
                <ul class="nav navbar-nav floatClear">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">HOME</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Error">DATA/RESOURCES</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Error">COMMUNITY</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" 
                            asp-area="" asp-controller="Home" asp-action="Error">PROGRAMS <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><h5>Student Programs</h5></li>
                                <li><a asp-area="" asp-controller="Home" asp-action="Error">CSTAHR</a></li>
                                <li><a asp-area="" asp-controller="Home" asp-action="Error">Teen Obesity</a></li>
                                <li><a asp-area="" asp-controller="Home" asp-action="Error">Refugee Program</a></li>

                                <li><h5>Current Programs</h5></li>
                                <li><a asp-area="" asp-controller="Programs" asp-action="CBPR">CBPR</a></li>
                                <li><a asp-area="" asp-controller="Programs" asp-action="Upstream">Upstream</a></li>
                                <li><a asp-area="" asp-controller="Home" asp-action="Error">Healthy Sleep</a></li>

                                <li><h5>Past Programs</h5></li>
                                <li><a asp-area="" asp-controller="Home" asp-action="Error">Mental Health</a></li>
                                <li><a asp-area="" asp-controller="Home" asp-action="Error">Kick It Tobacco Teen</a></li>
                                <li><a asp-area="" asp-controller="Home" asp-action="Error">Asthma</a></li>
                            </ul>
                    </li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Summit">2017 SUMMIT</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Error">ABOUT US</a></li>
                </ul>
            </div>
        </div>

    </div><!-- container end-->
</nav>

CSS

    /* Screen size changes */
@media screen and (max-width: 258px) {
    /* CSS for smaller logo */
    .navbar {
        height: 90px !important;
        margin-bottom: 0px !important;
    }

    .navbar-brand {
        width: 120px;
    }

    .navbar-collapse {
        margin-top: 0px;
        border: none !important;
    }
}

@media screen and (max-width: 420px) {
    /* 2017 Health Summit header text smaller */
    .small-h1 {
        font-size: 20px !important;
    }
}

@media screen and (max-width: 550px) {
    /* switch size of whats' new image header */
    .whats-new-img {
        display: none;
    }

    .whats-new-small {
        display: block !important;
    }
}

@media screen and (min-width: 259px) and (max-width: 767px) {
    /* CSS for smaller logo */
    .navbar {
        height: 140px !important;
        margin-bottom: 0px !important;
    }

    .navbar-brand {
        width: 200px;
    }

    .navbar-collapse {
        margin-top: 48px;
    }
}

@media screen and (max-width:767px) {
    /* Submenu headers black font */
    .dropdown-menu > li > h5 {
        color: black !important;
    }

    /* CSS for navbar collapse */
    .navbar-collapse ul {
        width: 100% !important;
    }

    .navbar-nav {
        float: none !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        margin-left: 0px !important;
        margin-bottom: 0px !important;
    }

    .navRow1 {
        display: none;
    }

    .nav > li > a:hover,
    .nav > li > a:focus {
        color: white !important;
        background-color: #a09d91 !important;
        border-bottom: none !important;
        padding-top: 10px !important;
    }

    .nav > li {
        background-color: #c9c5b6 !important;
    }

    .nav > li > a {
        padding-top: 10px !important;
        display: block !important;
        text-align: center !important;
    }

    /* 2017 Health Summit header text smaller */
    .small-h1 {
        font-size: 28px;
    }

    .padTop40 {
        padding-top: 0px !important;
    }

    /* Padding between Mission & image */
    .mission-pad {
        padding-top: 20px;
    }

    /* Don't need that much padding on phone */
    .padBot80 {
        padding-bottom: 20px !important;
    }

    /* Smaller Sept 14 image */
    .smaller-sept14 {
        width: 100px;
    }
}

/* Submenu appears on hover */
@media screen and (min-width: 768px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    /* Smaller nav items */
    .nav > li > a {
        font-size: 67%;
    }

    .navRow1 {
        margin-top: 26px !important;
    }

    .nav > li > a {
        padding-top: 11px !important;
        height: 30px !important;
    }

    .navRow2 > ul > li > a:hover,
    .navRow2 > ul > li > a:focus {
        border-bottom: 3px solid #6cb645 !important;
        padding-top: 11px !important;
    }

    /* CSS for smaller logo */
    .navbar {
        height: 140px !important;
        margin-bottom: 0px !important;
    }

    .navbar-brand {
        width: 200px;
    }

    .navbar-collapse {
        margin-top: 0px;
    }
}

@media screen and (min-width: 992px) {
    .mission-pad {
        padding-top: 15px;
    }

    .vision-pad {
        padding-top: 30px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .nav > li > a {
        font-size: 90%;
    }
}

@media screen and (min-width: 1200px) {
    /* nothing */
}

body {
    font-family: 'Montserrat-Regular', Arial, Helvetica, sans-serif;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    margin: 0px 0px 60px 0px;
    padding: 0px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

.navbar {
    padding-top: 5px;
    height: 180px;
    background-color: white;
    margin-bottom: 10px;
    border: 0px !important;
}

/* NAVBAR line height is 20px by default so add 30px top and bottom
to equal the new .navbar-brand 80px height  */

.nav > li > a {
    color: black;
    font-weight: bold;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 41px;
    vertical-align: middle;
    display: table-cell;
}

.navbar-toggle {
    padding: 10px;
    margin: 25px 15px 25px 0;
    background: #c9c5b6 !important; /*Whatever colour you want for background */
}

.icon-bar {
    background: white !important; /*Whatever colour you want for icon lines*/
}

.navRow2 > ul > li > a:hover,
.navRow2 > ul > li > a:focus {
    background-color: white;
    border-bottom: 5px solid #6cb645;
    padding-top: 5px;
}

.nav > li > a.icons:hover,
.nav > li > a.icons:focus {
    background-color: white; /*Change rollover cell color here*/
}

.navbar-brand {
    padding-top: 10px !important;
}

.navbar-collapse {
    padding-bottom: 0px !important;
}

.navRow1 {
    padding-right: 6px;
    margin-top: 70px;
    padding-bottom: 5px;
}

footer {
    color: white;
    padding: 5px 15px 25px 15px;
    background-color: #4c4c4c;
}

.glyphicon {
    font-size: 15px;
}

footer ul {
    display: inline-flex;
    list-style-type: none;
    margin-left: 0;
    padding-left: 0px;
}

.liText {
    font-size: 15px;
    margin-left: 5px;
    vertical-align: text-bottom;
}

footer h4 {
    color: #6cb645;
    padding: 10px 0 10px 10px;
}

.footCol {
    padding-left: 10px;
    padding-right: 10px;
}

.btn-brown {
    margin-top: 10px;
    color: black;
    background: #c9c5b6;
}

.btn-brown:hover,
.btn-brown:focus {
    color: white;
    text-decoration: none;
    background-color: #a09d91; /*Change rollover cell color here*/
}

.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.panel.panel-green {
    border-radius: 0px;
    border-color: #dfdfdf;
}

.panel.panel-green .panel-heading {
    border-radius: 0px;
    color: black;
    background-color: #a7d38f;
    padding-left: 25px;
}

.panel.panel-green .panel-body {
    background-color: #F2F2F2;
    color: #4D4D4D;
    padding-left: 25px;
    padding-right: 25px;
}

.resourcesButtons {
    margin-bottom: 20px;
}

.icons {
    display: inline-flex;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.floatRight {
    float: right;
}

.floatClear {
    float: right;
    clear: both;
}

.padBot10 {
    padding-bottom: 10px;
}

.padBot20 {
    padding-bottom: 20px;
}

.padBot80 {
    padding-bottom: 80px;
}

.padTop {
    padding-top: 20px;
}

.padTop40 {
    padding-top: 40px;
}

.margLeft {
    margin-left: 5px;
}

.copyright {
    background-color: #6f6f6f;
    padding: 10px;
    color: black;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: white !important;
}

.dropdown-menu > li > h5 {
    padding: 10px 0px 10px 15px;
    font-weight: bold;
    color: #6cb645;
    margin: 0px !important;
}

/* Remove border on dropdowns */
.navbar-nav > li > .dropdown-menu {
    border: none !important;
    padding: 0px !important;
}

/* Container top & bottom margin */
.topBotMargin {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Carousel */
/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

.red-text {
    color: #c75c5c;
}

.mission-vision {
    font-weight: bold;
    font-size: 20px;
    color: #4d91bb;
}

.whats-new-small {
    display: none;
}

如果您缩小屏幕尺寸以到达导航栏切换按钮，请单击该按钮，然后单击“程序”下拉菜单，所有下拉菜单都不会覆盖正文内容。我希望下拉导航覆盖它下面的所有内容。

我今天搜索了很多，但我找不到它为什么不起作用。我很确定它在某些时候可以正常工作，但也许是我用 CSS 更改的东西导致了问题？

Answer 1

只需添加这种样式：

.navbar {
    z-index:99;
}