html - 悬停时的 Bootstrap 导航栏下拉

Question

我想要导航栏顶部的边框，并且在悬停每个菜单项边框顶部颜色时应该改变。

我是这样走的

.dropdown:hover .dropdown-menu {
  display: block;
}
.navbar-nav > li > a:hover {
  border-top: 3px solid #F68220;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse" style="background:#ffffff;border:none;border-top:solid 2px grey;">
  <div class="container-fluid">

    <ul class="nav navbar-nav">
      <li class=""><a href="#">Home</a>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1</a>
        <ul class="dropdown-menu" style:>
          <li><a href="#">Page 1-1</a>
          </li>
          <li><a href="#">Page 1-2</a>
          </li>
          <li><a href="#">Page 1-3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Page 2</a>
      </li>
      <li><a href="#">Page 3</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

您需要对 CSS 进行小幅修改。您需要添加一个新的选择器并修改一个现有的选择器，如下所示。

如果您以全屏模式查看它，您应该会看到它处于工作状态。

.dropdown:hover .dropdown-menu {
  display: block;
}
.navbar-nav > li {
  top: -2px;
}
.navbar-nav > li > a:hover {
  border-top: 2px solid #F68220;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse" style="background:#ffffff;border:none;border-top:solid 2px grey;">
  <div class="container-fluid">

    <ul class="nav navbar-nav">
      <li class=""><a href="#">Home</a>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1</a>
        <ul class="dropdown-menu" style:>
          <li><a href="#">Page 1-1</a>
          </li>
          <li><a href="#">Page 1-2</a>
          </li>
          <li><a href="#">Page 1-3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Page 2</a>
      </li>
      <li><a href="#">Page 3</a>
      </li>
    </ul>
  </div>
</nav>