悬停下拉式引导导航栏

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>