角型UIドロップダウンリストのCSSを変更できない

Question

In this plunkカーソルが項目上にあるとき（ホバー上）にリスト内の項目の色を変更しようとするクラスの角度付きUIドロップダウンリスト

ホバーの<li>にクラスを割り当てようとしましたが、うまくいきません。ホバリングしないでクラスを設定すると動作します。

CSSの代わりに李の要素に

li.ddl-li { 
    background-color:yellow; /* works */ 
} 

li.ddl-li:hover { 
    background-color:orange; /* doesn't work */ 
} 

HTML

<div class="btn-group" uib-dropdown> 
    <button id="btn-append-to-body" type="button" class="btn btn-primary" 
      uib-dropdown-toggle="">{{selection}} <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" ng-click="selectItem($event)" uib-dropdown-menu="" 
      role="menu" aria-labelledby="btn-append-to-body"> 
     <li role="menuitem" class="ddl-li"> 
      <a href="#" data-value="1" >The first item</a> 
     </li> 
     <li role="menuitem" class="ddl-li"> 
      <a href="#" data-value="2">Another item</a> 
     </li> 
     <li role="menuitem" class="ddl-li"> 
      <a href="#" data-value="3">Yet another item</a> 
     </li> 
    </ul> 
    </div> 

Answer 1

、すべてのli elemtをカバーしていました。カスタムクラスを追加せずに

li.ddl-li a { 
    background-color: yellow; 
} 

li.ddl-li a:hover { 
    background-color: orange; 
} 

オプション：
私はあなたのplunker

CSSをフォークしてきました。
.dropdown-menuブートストラップクラスをオーバーライドすることができます。

Answer 2

変更：

これが試みです。あなたはホバーので、あなたは、あなたのカスタムクラス内<a></a>要素のbackground-colorを変更する必要が李

li.ddl-li a:hover { 
     background-color:orange; 
    }