どのように私は、ドロップダウンリスト持っているHTML

Question

でスクロール可能なドロップダウンリストを作成します。

<ul class="dropNav" ng-init="loadPage('countByDays', 'dataWithTrmGroup', selectedItem)" > 
      <li> 
       <img src="Images/toggle.png" /> 
       {{ selectedItem.name }} 
       <ul> 
        <li ng-repeat="group in groupsData | groupfilter:selectedItem.id" ng-click="changeSelectedObject('countByDays', 'dataWithTrmGroup', group)">{{ group.name }}</li> 
       </ul> 
      </li> 
     </ul> 

と私のCSSを、私はそれがスクロール可能であるが、overflow-y: scroll;

を入れしようとしています

.dropNav { 
    cursor: pointer; 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
} 
.dropNav li { 
    display: block; 
    position: relative; 
    float: left;  
} 
.dropNav li ul { 
    display: none; 
} 
.dropNav li { 
    width:200px; 
    display: block; 
    background: #93297e; 
    padding: 10px 10px 10px 10px; 
    text-decoration: none; 
    white-space: nowrap; 
    color: #fff; 
    font-size:12px; 
    font-family:Arial, Helvetica, sans-serif; 
} 

それリストの1要素のみが表示されます。私は10要素と他のものがスクロールダウンになるのを見たいと思っています。私は<ul class="dropNav" size="10">を設定しようとしましたが、良い結果はありません。

Answer 1

この目的のためにはangular-ui-selectを使用してください。これを使用すると、スクロール可能なドロップダウン内の画像とテキスト（必要な場合）を簡単に使用することができます。

Working Demo