引导3折叠菜单显示在渲染后的身体

Question

我正在构建我的第一个BootManrap 3网站，以MetroMan Bootstrap模板开始，并遵循Pluralsight教程。我遇到了一个具体的行为，其中的菜单正在显示其他元素在体内显示。随着网站宽度降低到超出iPad的水平，导航按预期成为下拉菜单，但该菜单显示在（at）RenderBody（）后面。随着宽度的减小，此行为不会发生在网站中的任何其他位置。

这里是_Layout.cshtml

的相关部分

<header> 
<div class="container"> 
    <div class="row"> 
    <div class="col-md-3 col-sm-4"> 
     <!-- Logo starts --> 
     <div class="logo"> 
     <a href="~/Home/index"><img src="../Content/Templates/img/DJGLogo250.png" alt="Author Logo" class="navbar-brand" /></a> 
     <div class="clearfix"></div> 
     </div> 
     <!-- Logo ends --> 
    </div> 
    <div class="col-md-9 col-sm-8"> 
     <!-- Navbar starts --> 
     <div class="navi pull-right"> 
     <div id="ddtopmenubar" class="mattblackmenu"> 
      <!-- Main navigation --> 
      <!-- Use the background color class in anchor tag for colorful menu --> 
      <ul> 
      <li><a href="~/Home/Index" class="blightblue"> <i class="icon-home"></i> Home</a></li> 
      <!-- Main navigation --> 
      <li> 
       <a href="#" rel="ddsubmenu2" class="bred"> <i class="icon-book"></i> Author</a> 
       <!-- Sub Navigation --> 
       <ul id="ddsubmenu2" class="ddsubmenustyle"> 
       <li><a href="~/Home/About">About Damon</a></li> 
       <li><a href="~/Home/AskTheAuthor">Ask Damon</a></li> 
       <li><a href="~/Home/Speaking">Speaking Engagements</a></li> 
       <li><a href="~/Home/Books">Books</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#" rel="ddsubmenu2" class="bviolet"> <i class="icon-comments"></i> Interact</a> 
       <!-- Sub Navigation --> 
       <ul id="ddsubmenu2" class="ddsubmenustyle"> 
       <li><a href="~/News/News">News</a></li> 
       <li><a href="~/Blog/Blog?curpos=0">Long-View Living (Blog)</a></li> 
       <li><a href="~/BookEngagement/BookEngagement">Book an Engagement</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#" rel="ddsubmenu2" class="bgreen"> <i class="icon-bookmark"></i> Extras</a> 
       <!-- Sub navigation --> 
       <ul id="ddsubmenu2" class="ddsubmenustyle"> 
       <li><a href="~/RecommendedReading/RecommendedReading">Recommended Reading</a></li> 
       <li><a href="~/Home/StudyTips">Bible Study Tips</a></li> 
       </ul> 
      </li> 
      <li><a href="~/Contact/Contact" class="bblue"> <i class="icon-envelope-alt"></i> Contact</a></li> 
      </ul> 
     </div> 
     </div> 
     <div class="navis"></div> 
     <div class="clearfix"></div> 
    </div> 
    </div> 
</div> 
</header> 

<div class="clearfix"></div> 

<!-- Header ends --> 


    @RenderBody() 

如果你看看左边，正上方的蓝色天空，白色的那个条子菜单。通过在驱动这两个元素的CSS样式上设置z-index值，我能够让菜单显示在renderbody之上。这是一个丑陋的黑客，但它确实工作。

以下是代码style.css的两部分。

.navis select{ 
    display:none; 
    z-index:300; 
} 

/* Parallax Slider */ 

.da-slider{ 
    margin-bottom: 0px; 
    border-top: 3px solid #eee; 
    border-bottom: 3px solid #eee; 
    z-index:-1; 
} 

必须有简单的东西，我很想念 - 这将使这两个元素来显示一个接一个，而不是另一个之上。 有什么建议吗？

Answer 1

请添加z-index：-1;为滑块添加z-index：9999;对于菜单

.da-slider{z-index:-1;} 


.navis{z-index:9999;}