Bootstrap下拉菜单（在导航中）没有JavaScript

Question

我想知道是否可以做以下工作：

#keepwidth {
  width: 1000px;
}
.row.top-menu > ul {
  padding: 0;
}
.row.top-menu > ul > li {
  display: inline-block;
}
.row.top-menu > ul > li > a {
  display: inline-block;
  background-color: #009ec3;
  color: #fff;
  min-width: 123px;
  text-align: center;
  text-transform: uppercase;
  border: 2px #009ec3 solid;
  border-radius: 3px;
  margin: 0;
}
.row.top-menu > ul > li > a:hover {
  background-color: #90d2ec;
  color: #666;
  text-decoration: none;
}
.row.top-menu > ul > li.dropdown:hover ul {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="keepwidth">
  <div class="row top-menu">
    <ul>
      <li>
        <a href="#">asdas</a>
      </li>
      <li class="dropdown">
        <a href="#" class="" role="button">Hover here <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">temp</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">sadsad</a>
      </li>
      <li>
        <a href="#">asdasda</a>
      </li>
      <li>
        <a href="#">sadasdasdsa</a>
      </li>
      <li>
        <a href="#">sadasdsadsa</a>
      </li>
      <li>
        <a href="#">sadasdsasdasdsa</a>
      </li>
    </ul>
  </div>
</div>

我不想使用JavaScript而且我不希望移动下拉菜单元素（例如margin-top: 0或margin: 0）并且我希望在将鼠标悬停时显示下拉列表下拉菜单本身和引用它的按钮。

Answer 1

由于您正在使用Bootstrap，因此您需要按照here所述的CSS约定来获取可预测的行为：

https://jsfiddle.net/Bendrick92/mgny3g87/

＆＃13;

＆＃13;

#keepwidth {
  width: 1000px;
}
.navbar-nav > li > a {
  display: inline-block;
  background-color: #009ec3;
  color: #fff;
  min-width: 123px;
  text-align: center;
  text-transform: uppercase;
  border: 2px #009ec3 solid;
  border-radius: 3px;
  margin: 0;
}
.navbar-nav > li > a:hover {
  background-color: #90d2ec;
  color: #666;
  text-decoration: none;
}
.dropdown:hover .dropdown-menu {
  display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="keepwidth">
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li>
        <a href="#">asdas</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" role="button">
          Hover here <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">temp</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">sadsad</a>
      </li>
      <li>
        <a href="#">asdasda</a>
      </li>
      <li>
        <a href="#">sadasdasdsa</a>
      </li>
      <li>
        <a href="#">sadasdsadsa</a>
      </li>
      <li>
        <a href="#">sadasdsasdasdsa</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;