Question

＆＃13;

.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;
}

＆＃13;

 <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 -->

＆＃13;

我改变了立场：相对;位置：绝对;然而现在下拉回到幻灯片放映。我很累，解决这个问题仍然无法做到。请以正确的方式指导我。

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以确保它保留在页面上任何其他绝对定位的元素之上。

下拉正在移动整个网站内容

1 个答案: