html - 在 Bootstrap 中创建水平菜单栏

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