改变bootstrap插入符号的颜色（悬停在第一个“li”元素上）

Question

所以基本上，在第一个子元素悬停期间，我似乎无法更改下拉列表上方插入符号的颜色。

我使用的是Bootstrap3，下拉代码如下：

JSFiddle

导航下拉列表

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Drop1 </a></li>
      <li><a href="#">Drop2 </a></li>
    </ul>
  </li>
</ul>

无论如何，我希望顶部的插入符号在悬停时为第一个孩子的“li”元素着色：

Example

关于如何在第一个元素悬停时改变插入符颜色的任何想法？

Answer 1

不幸的是，你只能用CSS做到这一点。我认为你有两个选择..丑陋的一个 - 使用JavaScript，或者你可以改变carret的位置来坐在第一个元素内，然后：

.dropdown-menu li:first-child:hover:after {...}