Question

我尝试使用子菜单实现一个stiky导航，就像在bootstrap文档https://getbootstrap.com/docs/3.3/components/#nav中右侧使用的子菜单一样。

问题是我使用的模板有一个修改过的bootstrap.min.css，现在如果我尝试使用原来的模板会破坏我的网站。

有人有解决方案吗？或者我应该使用的替代方案？我必须提一下，这个导航也将用于文档，很长一段时间。

谢谢！

Answer 1

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

带子菜单的晃动导航

1 个答案: