Question

我想创建一个水平菜单栏

这是我的代码的一部分

<div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle"  role="button" aria-expanded="false">About<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li ><a href="aboutus.html">Company Overview</a></li>
                <li ><a href="#">Our Mission</a></li>
                <li ><a href="#">Management Team</a></li>
              </ul>
            </li>
            <li  class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Product Areas<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu" >
                <li><a href="#" >Education</a></li>
                <li><a href="#" >Finance</a></li>
                <li><a href="#">Retail</a></li>
                <li><a href="#">Public Services</a></li>
              </ul>
            </li>

              </ul>
        </div>

在bootstrap.css中我添加了像

这样的东西

.dropdown-menu  li {
    display: block;
    float:left;
}
.open  ul {
    display: inline-flex !important;
}

我当前的输出

HOME |  Abouts V  | Products v
     |
     |   our mission | Managment
     ---------------------------

（从点击按钮开始下拉菜单）

预期

HOME |  Abouts V  | Products v

our mission | Managment
 ---------------------------

（从下拉菜单开始）

Answer 1

试试这个：

.nav>li,  .dropdown {
  position: static;
}
.dropdown-menu  li {
    display: inline-block;
}
.open  ul {
  position: absolute;
  top: 50px;
  left: 0;
}

在bootstrap中创建水平菜单栏

1 个答案: