带有子菜单的Stiky导航

Question

我正在尝试使用submenu实现史蒂克导航，就像bootstrap文档中右侧使用的那样https://getbootstrap.com/docs/3.3/components/#nav。

问题是我使用的模板具有修改的bootstrap.min.css，现在，如果我尝试使用原始一个，请打破我的网站。

有人对此有解决方案吗？还是我应该使用的替代方案？我必须提到，此导航也将用于文档，一个长。

。

谢谢！

Answer 1

$("li:has(ul)").hover(function(){
  $("ul",this).toggle('slow');
});

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
header {
  background: lightblue;
  position: fixed;
  width: 100%;
  top:0; 
  left: 0;
  z-index: 9;
  padding: 10px;
}
ul li {
  display: inline-block;
  vertical-align: top;
}
.submenu li {
   display: block;
}
.submenu {
  display: none;
}
.logo_wrapper {
 float: left;
}
.menu_wrapper {
 float: right;
 padding-right:15px;
}
section {
height: 500px;
padding-top:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <div class="logo_wrapper">LOGO</div>
  <div class="menu_wrapper">
    <ul class="nav navbar-nav">
      <li><a href="#">About</a></li>
      <li>
          <a href="#">Services</a>
          <ul class="submenu">
            <li><a href="#">Web App Development</a></li>
            <li><a href="#">Mobile App Development</a></li>
            <li><a href="#">Web Design</a></li>
          </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</header>
<section>home</section>
<section>about</section>
<section>services</section>
<section>contact</section>