css - 带有子菜单的粘性导航

我正在尝试通过子菜单实现引导式导航，如引导文档https://getbootstrap.com/docs/3.3/components/#nav右侧使用的子菜单。

问题是我正在使用的模板具有经过修改的bootstrap.min.css，现在，如果我尝试使用原始模板，则会破坏我的网站。

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

谢谢！

最佳答案

$("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>

关于css - 带有子菜单的粘性导航，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49496326/