改變角度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

你必須改變<a></a>元素的background-color您的自定義類中。
我叉你plunker

CSS：

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

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

選項，而不添加自定義類。
您可以覆蓋.dropdown-menu引導程序類別：

ul.dropdown-menu li a { 
    background-color: #eee; 
} 

ul.dropdown-menu li a:hover { 
    background-color: #bbb; 
} 

Answer 2

變化的元素，而不是李。一個把覆蓋所有李elemt，讓你一懸停，而不是李

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