引导“汉堡包”移动菜单z-index的问题

我一直在说脏话，谷歌搜索，比较的代码，并sweared略偏在这个情况下项目在我的“汉堡包移动菜单”下拉列表的背后是所有其他在我的网页内容..引导“汉堡包”移动菜单z-index的问题

我一直在调整不同层次，不同结构的z指数的不同变化，但我还没有找到任何解决方案，这又..

希望有人多一点技能比我自举CSS可以找出这有什么问题..

HTML

个

<div class="navbar-default navbar-fixed-top with-bg" role="navigation"> 
      <div class="container-fluid"> 

       <div class="navbar-header"> 

        <div class="header_menu visible-xs visible-sm hidden-md hidden-lg"> 
         <a href="ViewTeam.aspx?teamid=1" id="lnkPersonalMobile" style="display:block"><i style="padding-right:5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag</a> 
         <a href="Forum.aspx?type=1" id="lnkCoachForumMobile" style="display:block"><i style="padding-right:5px" class="glyphicon glyphicon-star-empty gly-spin"></i>Trenerforum</a> 


         <div style="float: left"> 

         </div> 
        </div> 

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="Default.aspx"> 
         <div id="clublogo" class="logo-placeholder" style="background-image:url(https://klubbweb.blob.core.windows.net/clubid1/ef33672c-3b2c-4ee0-856e-b86b1b4ae90flogo.png);"></div> 
        </a> 

       </div> 
       <div class="header_menu hidden-xs"> 
        <a id="lnkAboutUs" href="/ViewAboutUs">Om GHK</a> 
        <a id="lnkTeamOverviewDesktop" href="/TeamOverview">Lagoversikt</a> 
        <a id="lnkEventCalendar" href="/EventCalendar">Eventkalender</a> 
        <a id="lnkAdminPageDesktop" href="/AdminPage">Admin</a> 

        <a href="ViewTeam.aspx?teamid=1" id="lnkPersonal" style="display:block"><i style="padding-right:5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag</a> 
        <a href="Forum.aspx?type=1" id="lnkCoachForum" style="display:block"><i class="glyphicon glyphicon-star-empty gly-spin"></i>&nbsp;Trenerforum</a> 


        <div style="float: left"> 

        </div> 

       </div> 

       <div class="collapse navbar-collapse"> 


        <ul class="nav navbar-nav navbar-right"> 
         <li class="active"> 
          <!--<a href="#" class="hidden-xs">Home</a>--> 
          <a id="lnkTeamOverview" class="visible-sm" href="/TeamOverview">Lag</a> 
         </li> 
         <li class="active"> 
          <a id="lnkAdminPage" class="visible-sm" href="/AdminPage">Administrasjon</a> 
         </li> 
         <li class="active"> 
          <a id="lnkTeamOverviewMobile" class="visible-sm" href="/EventCalendar">Eventkalender</a> 
         </li> 
        </ul> 
       </div> 
       <!--/.nav-collapse --> 
      </div> 
     </div>

重写的引导风格

.navbar-default { 


background-image: url('Images/header-bg.png'); 
    background-position: top left; 
    background-repeat: no-repeat; 
    background-color: #333; 
    border-color: #732181; 
    height: 130px; 
    border-bottom: 4px solid #7b9cc6; 
} 
.navbar-default .navbar-brand { 
    color: #ffffff; 
    padding-left: 0; 
} 

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { 
    color: #ffffff; 
} 
.navbar-default .navbar-text { 
    color: #ffffff; 
} 
.navbar-default .navbar-nav > li > a { 
    z-index: 888888!important; 
} 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
    color: #000; 
} 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    color: #ffffff; 
    background-color: #00468e; 
} 
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { 
    color: #ffffff; 
    background-color: #00468e; 
} 
.navbar-default .navbar-toggle { 
    border-color: #00468e; 
} 
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 
    background-color: #00468e; 
} 
.navbar-default .navbar-toggle .icon-bar { 
    background-color: #ffffff; 
} 
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form { 
    border-color: #ffffff; 
    z-index: 99999999; 
} 
.navbar-default .navbar-link { 
    color: #ffffff; 
} 
.navbar-default .navbar-link:hover { 
    color: #ffffff; 
} 

input[type="checkbox"] { 
    height: 20px; 
    width: 20px; 
    line-height: 0.1em!important; 
} 

.checkbox-label { 
    line-height: 2em; 
} 

@media (max-width: 767px) { 

.navbar-default { 
    background-color: #333; 
    border-color: #00468e; 
    height: 64px; 
    border-bottom: 4px solid #00468e; 
} 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
    color: #ffffff; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
    color: #ffffff; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
    color: #ffffff; 
    background-color: #00468e; 
    } 

    .navbar-default .navbar-header { 
     padding-left: 15px; 
    } 

    .with-bg { 

    } 

    .logo-placeholder { 
     height: 55px!important; 
     width: 55px!important; 
     background-size: 100% 100%; 
     margin-top: -10px; 
     margin-left: -10px; 
    } 

    .navbar-default .navbar-brand img { 
    width: 101px; 
    height: 27px; 
} 

}

来源

2016-04-23 Terje Nygård