<select>標籤想在選項

Question

垂直滾動請先訪問此鏈接：http://jsfiddle.net/UWNtK/

這裏是一個<select>標籤與選項數目。我已經在這裏得到了這個教程的啓發：http://bavotasan.com/2011/style-select-box-using-only-css/

現在我需要將所有選項包裝在div下，這樣就會有一個垂直滾動條（在類別1的情況下）。 如何獲得這個輸出？

我使用這個HTML：

<div class="drop1"> 
    <select> 
     <option value="categ1">Category1</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
    </select> 
</div> 
<div class="drop2"> 
    <select> 
     <option value="categ2">Category2</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
    </select> 
</div> 

和CSS：

.drop1, .drop2 { 
    float: left; 
    width: 180px; 
    height: 34px; 
    overflow: hidden; 
    background: url(images/dropdwn.png) no-repeat right #ccc; 
    border-radius: 4px; 
    border:1px solid #000; 
    box-shadow: 0 1px 3px #f00; 
    font-size:14px; 
    margin:0 10px; 
} 
.drop1 select, .drop2 select { 
    background: transparent; 
    width: 215px; 
    padding: 5px; 
    font-size: 14px; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    color: #f00; 
    cursor: pointer; 
} 
.drop1 option, .drop2 option { 
    text-align: center; 
    margin: 0 auto; 
    color: #000; 
    cursor: pointer; 
} 

感謝。