如何使用相对位置放置Mega下拉菜单？

Question

我创建了Mega菜单。在按钮上点击mega菜单将创建和下拉将下来。超大菜单内容栏将隐藏滑块。当菜单下拉菜单出现时，我想向下移动滑块，并且滑块的位置被大型菜单内容所取代。下拉式超级菜单处于绝对位置。如果我将其更改为相对，它将替换滑块的位置与mega菜单下拉菜单content.But样式导航栏被干扰。

这是导航代码

​

<div class="navbar navbar-default navbar-static-top">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         
      </div>
      <div class="navbar-collapse collapse navbar-left">
         <ul class="nav navbar-nav">
          
            <li class="dropdown menu-large">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b></a>          
               <ul class="dropdown-menu megamenu row">
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Software</li>
                        <li><a href="#">Desktop</a></li>
                        <li class="disabled"><a href="#">Mobile</a></li>
                        <li><a href="#">Tablet</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Hardware</li>
                        <li><a href="#">Arduino</a></li>
                        <li><a href="#">Raspberry PI</a></li>
                        <li><a href="#">VoCore</a></li>
                        <li><a href="#">Banana PI</a></li>
                     </ul>
                  </li>
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Nano-Tech</li>
                        <li><a href="#">AFM</a></li>
                        <li><a href="#">STM</a></li>
                        <li><a href="#">Nano-Tubes</a></li>
                        <li><a href="#">Nano-Wires</a></li>
                        <li><a href="#">Materials</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">A.I.</li>
                        <li><a href="#">Artificial Intelligence</a></li>
                     </ul>
                  </li>
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">SaaS</li>
                        <li><a href="#">On-Demand</a></li>
                        <li><a href="#">No Software</a></li>
                        <li><a href="#">Cloud Computing</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">On-Premise</li>
                        <li><a href="#">Data Center</a></li>
                        <li><a href="#">Hosting Environment</a></li>
                        <li><a href="#">Internal IT</a></li>
                     </ul>
                  </li>
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Server-Side</li>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">Java</a></li>
                        <li><a href="#">Python</a></li>
                        <li><a href="#">Ruby</a></li>
                        <li><a href="#">ColdFusion</a></li>
                        <li><a href="#">ASP.NET</a></li>
                        <li><a href="#">GO</a></li>
                        <li><a href="#">Perl</a></li>
                        <li><a href="#">Lasso</a></li>
                     </ul>
                  </li>
               </ul>
            </li>

           
             
         </ul>
      </div>
      
   </div>
</div>

​

打开下拉菜单的Javascript

​

<script>
  $(document).ready(function() {
jQuery(document).ready(function(){
    $(".dropdown").hover(
        function() { $('.dropdown-menu', this).stop().fadeIn("fast");
        },
        function() { $('.dropdown-menu', this).stop().fadeOut("fast");
    });
});
}
</script>

​

css

​

.menu-large {
  position: static !important;
}

.megamenu {
  padding: 20px 0px;
  width: 100%;
}

.megamenu>li>ul {
  padding: 0;
  margin: 0;
}

.megamenu>li>ul>li {
  list-style: none;
}

.megamenu>li>ul>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}

.megamenu>li ul>li>a:hover,
.megamenu>li ul>li>a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}

.megamenu.disabled>a,
.megamenu.disabled>a:hover,
.megamenu.disabled>a:focus {
  color: #999999;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: #00A7E8;
}

.megamenu.disabled>a:hover,
.megamenu.disabled>a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  cursor: not-allowed;
}

.megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}

​

Answer 1

如果你用jsFiddle或codepen编写代码，或者只是将html、css和js代码组合在一起而不用php，那么我们就能看到真正的问题所在。我不能运行你的代码。但是根据你的问题，我可以说这可能是z-index的问题。