用于UL李内部按钮反应为锚标记

Question

悬停功能，我不能够使用<ul> <li>悬停并点击.. 里面<li>标签我有<button>标签不<a>标签。
我想要相同的悬停并单击按钮标记中的功能作为仅锚点。

我的CSS：

.custom-anchor:hover { 
color: #ffffff; 
background-color: #3276b1; 
text-decoration: none; 
} 

我的HTML：

<div class="btn-group"> 
    <button id="csr_duration_btn" 
      class="btn dropdown-toggle btn-xs btn-success" 
      data-toggle="dropdown">{{csrServiceModel.selectedDuration.name}}<i class="fa fa-caret-down"></i> 
    </button> 
    <ul id="comparision-chart-interval" class="dropdown-menu pull-right"> 
     <li data-ng-repeat="duration in csrServiceModel.durations"> 
      <button class="btn btn-link custom-anchor" data-ng-click="csrServiceModel.durationSelect(duration)" ng-disabled="duration.enabled">{{ duration.name }}</button> 
     </li> 
    </ul> 
</div> 

我尝试添加相同的自定义类<li>标签还，但它无法正常工作。

它应该像下面的图片：

编辑：

你可以看到.....某些选项中列出禁用..有上点击任何方式禁用选项列表不应该做任何事情..

我想防止万一，如果禁用列表选项点击..

请帮忙...

Answer 1

它看起来像使用引导完成格式化。添加以下css规则：

#comparision-chart-interval li button { 
    width:100%; 
}