如何放置具有相对位置的超级下拉菜单？

Question

我创建了超级菜单。 在按钮单击巨型菜单将创建和下拉将下来。 大型菜单内容栏将隐藏滑块。 当菜单下拉菜单出现并且滑块的位置被大型菜单内容替换时，我想向下移动滑块。 下拉式巨型菜单处于绝对位置。如果我将其更改为相对，它将用大型菜单下拉内容替换滑块的位置。但是样式导航栏会受到干扰。

这是导航代码

<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 中编写代码，或者只是在没有 php 的情况下组合 html、css 和 js 代码，那么我们可以看到真正的问题。 我无法运行你的代码。 但根据你的问题，我可以说这可能是 z-index 的问题。