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

Question

I have Created Mega Menu. On button click mega menu will create and drop down will come down. The mega menu content bar will hide slider. I want to move slider down when menu dropdown appears and and the position of slider is replaced by mega menu content. Dropdown mega menu is in absolute position. if i change it to relative it will replace position of slider with mega menu dropdown content.But styling navbar is disturbed.

this is navigation code

 <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">AI</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 to open dropdown

 <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

If you code this in jsFiddle or codepen or just combine html,css,and js code without php then we can see the real problem. I'm not able to run you code. But as per your question i can say it may be issue with z-index.