下拉移動的整個網站內容

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，以確保它保持在頁面上任何其他絕對定位的元素之上。