引導「漢堡包」移動菜單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