Question

我有一个Bootstrap菜单，但About Us上的下拉列表效果不佳。试试这里的演示：https://jsfiddle.net/wbbpdfm7/

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

body {
  margin: 10px;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" style="background:#fff">

  <div class="container">
    <div class="navbar-header title">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
      <ul id="menu-primary-menu" class="nav">
        <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-13">
          <a href="http://localhost:8888/about-us/" class="dropdown-toggle" data-toggle="dropdown">About Us<b class="caret"></b></a>
          <ul class="dropdown-menu depth_0">
            <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
              <a href="http://localhost:8888/about-us/the-team/">The Team</a>
            </li>
            <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
              <a href="http://localhost:8888/about-us/michael/">Michael</a>
            </li>
          </ul>
        </li>
        <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12">
          <a href="http://localhost:8888/bespoke/">Bespoke</a>
        </li>
        <li id="menu-item-15" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15">
          <a href="http://localhost:8888/category/blog-news/">Blog</a>
        </li>
        <li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item active menu-item-11">
          <a href="http://localhost:8888/contact-us/">Contact Us</a>
        </li>
      </ul>
    </div>

  </div>

</nav>

＆＃13;

看看我如何点击菜单图标，我希望About Us子菜单打开，但它没有打开。

我做错了什么？

Answer 1

您已从.navbar-nav中删除<ul id="menu-primary-menu" class="nav">，因此您需要在移动视图中复制其级联样式。

@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    box-shadow: none;
}}

将上面的CSS中的.navbar-nav替换为您选择的类，以避免冲突并进一步调整您的设计。

Bootstrap Dropdown效果 - jQuery

1 个答案: