Question

我试图在我的网站菜单中包含一个下拉菜单，它工作正常，但当我点击它时，所有菜单栏都会混乱。下拉菜单向下移动标题，更改设计。我试图上传一张照片，但该网站并没有让我这么做。

基本上问题是，当我们点击下拉菜单时，它会放大菜单栏来改变设计，下拉菜单不会展开其他元素。希望你能帮助我，非常感谢你的支持。

    <header id="header" role="banner">
      <div class="container">
        <div id="navbar" class="navbar navbar-default">
          <div class="navbar-heade">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
              <a class="navbar-brand" href="../../index.html"></a> </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#main-slider"><i class="icon-home"></i></a></li>
                  <li><a href="http://www.google.com">Search your Place</a></li>
                  <li><a href="logout">Public your Place</a></li>
                  <li><a href="#" data-toggle="modal" data-target="#myModal">Sign Up</a></li>
                  <li><a href="#" data-toggle="modal" data-target="#myModallogin">Log In</a></li>

                  <li id="fat-menu" class="dropdown">
                    <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                      <i class="icon-user"></i> Prueba
                      <i class="icon-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a tabindex="-1" href="#">My Account</a></li>
                      <li class="divider"></li>
                      <li><a tabindex="-1" class="visible-phone" href="#">Opciones</a></li>
                      <li class="divider visible-phone"></li>
                      <li><a tabindex="-1" href="logout"><i class="icon-off"></i> Logout</a></li>
                    </ul>
                  </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </header>

我在bootstrap.css中试过这个

    .dropdown-menu {
      position: relative;
      z-index: 9999;

    }
    .navbar-default {
      background: #fff;
      border-radius: 0 0 5px 5px;
      border: 0;
      padding: 0;
      -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
      -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
      box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
      overflow: hidden;

Answer 1

这是两个解决方案

<强> 1）

您在上面尝试的css代码并非都是必需的..没有它也可以正常工作..这是http://jsfiddle.net/adarshkr/k7e7w1e6/的演示

2）

CSS

中需要更正

.dropdown-menu {
      position: absolute; /* it should not relative */
      z-index: 9999;

    }
    .navbar-default {
      background: #fff;
      border-radius: 0 0 5px 5px;
      border: 0;
      padding: 0;
      -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
      -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
      box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
      /* overflow: hidden;*/  /*comment of this line */
}

这是此更正的链接

http://jsfiddle.net/adarshkr/mo86gv1o/

菜单栏上的Bootstrap下拉菜单奇怪的行为

1 个答案: