css - 带子菜单的粘性导航

Question

我正在尝试使用子菜单实现一个粘性导航，就像 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>