下拉移动的整个网站内容

Question

.menu 
 
{border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9; overflow: hidden;} 
 

 
.navbar { 
 
} 
 

 
.navbar > .active > a 
 
{font-size: 14px; color: #3fbad8; font-family: 'open_sansbold'; background-image: none; 
 
background:#f7f7f7; border: none; text-shadow: none; box-shadow: none; 
 
} 
 

 
.navbar > .active > a:hover{ 
 
box-shadow: none; background: #fff; color: #6f7678; 
 
} 
 

 
.navbar > li{ 
 
border-right: 1px solid #e9e9e9; float: left;display: block;position: relative; z-index:1000;} 
 

 

 
.navbar > li>ul{display:none; position:relative;z-index:99} 
 

 

 
.navbar > li > a { display:block; 
 
color: #6f7678; padding: 25px; text-shadow: none; font-family: 'open_sansbold'; 
 
} 
 

 
.navbar > li > a:hover{ 
 
background: #f7f7f7; color: #3fbad8; 
 
} 
 

 

 

 
.navbar > li:hover ul{display:block; postion:absolute;} 
 

 

 

 
.navbar > li:hover li{float:none;} 
 

 
.navbar . > li:hover li a:hover{background: #f7f7f7; color: #3fbad8; 
 
} 
 
#sub{ 
 
    z-index:3; 
 
-webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
     border-radius: 5px; 
 
}

<div class="menu"> 
 
         <div class="navbar"> 
 
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
 
           <i class="fw-icon-th-list"></i> 
 
          </a> 
 
          <div> 
 
           <ul class="nav"> 
 
            <li class="active"><a href="home.aspx">Home</a></li> 
 
            <li><a href="about.aspx">About</a></li> 
 
            <li><a href="#">Services</a> 
 
            <ul class="nav"> <li><a href="printerhelp.aspx">Printer Service</a></li> 
 
             <li><a href="computerhelp.aspx">Computer Support</a></li> 
 
              <li><a href="emailsupport.aspx">Email Support</a></li> 
 
             <li><a href="antivirus.aspx">Virus Support</a></li> 
 

 

 
            </ul></li> 
 
            <li><a href="testinomial.aspx">Testinominals</a></li> 
 
            <li><a href="price.aspx">Price</a></li> 
 
            <li><a href="contact.aspx">Contact</a></li> 
 
           </ul> 
 
      
 
           <div runat="server" class="search-form"> 
 
            
 
          <a href="#myModal" role="button" class="btn" data-toggle="modal"> Call Now +1-xxxxxxxxx</a> 
 
     
 
            </div> 
 
       </div> 
 
         </div> 
 
        </div> 
 

 
        <!-- Menu ends -->

我已经改变了位置：相对;定位：绝对;但现在下降可以回到幻灯片放映。我厌倦了很多，以解决这个问题，我仍然无法做到这一点。请以正确的方式指导我一些。

Answer 1

添加此

.menu{ 
    position:absolute; 
    z-index:1000; //can be any number, but should be high enough to ensure it remains on top 
} 

这将需要在菜单中进行正常的堆叠顺序 - 允许其内容也可自由正常的DOM流。通过这种方式，当您打开它时，它将位于页面内容的上方而不会将其推下。

您将不得不在主内容部分的顶部添加等于导航栏关闭高度的边距，以便内容不会隐藏在导航后面。您还需要应用z-index，以确保它保持在页面上任何其他绝对定位的元素之上。