選擇選項不格式化

Question

我有一些代碼使用ul和li生成下拉列表Here is the first jsfiddle。這是我希望我的下降看起來。但是，當我嘗試將它們轉換爲選擇和選項下拉列表時，我收到以下格式，current jsfiddle。我所做的只是在第一個小提琴選項中替換李。任何想法如何解決這個問題或爲什麼這樣做？現在看來似乎無視一切，我代替

當前HTML

<select class="wrapper-dropdown-3 dropdown" name="Process" data-val-required="Required" dataval="true"> 
     <option value="">--- Select One ---</option> 
     <option value="Extrusion"><a href="#">Extrusion</a></option> 
     <option value="Injection"><a href="#">Injection</a></option> 
     <option value="Secondary"><a href="#">Secondary</a></option> 
     <option value="Vinyl Dip Molding"><a href="#">Vinyl Dip Molding</a></option> 
</select> 

當前CSS

.wrapper-dropdown-3 { 
    /* Size and position */ 
    position: relative; 
    width: 200px; 
    margin: 0 auto; 
    padding: 10px; 
    /* Styles */ 
    background: #fff; 
    border-radius: 7px; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1); 
    cursor: pointer; 
    outline: none; 
    /* Font settings */ 
    font-weight: bold; 
    color: #0000FF; 
} 
.wrapper-dropdown-3:after { 
    content:""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    right: 15px; 
    top: 50%; 
    margin-top: -3px; 
    border-width: 6px 6px 0 6px; 
    border-style: solid; 
    border-color: #8aa8bd transparent; 
} 
.wrapper-dropdown-3 .dropdown { 
    /* Size & position */ 
    position: absolute; 
    width: 100%; 
    height:100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    /* Styles */ 
    background: white; 
    border-radius: inherit; 
    border: 0px solid rgba(0, 0, 0, 0.17); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
    font-weight: normal; 
    list-style: none; 
    /* Hiding */ 
    opacity: 1; 
    /*Gets rid of the padding where the bullets would be*/ 
    padding-left:0; 
    -moz-appearance: none; 
    -webkit-appearance:none; 
    text-indent: 0.01px; 
    text-overflow:''; 
} 
.wrapper-dropdown-3 .dropdown option a { 
    display: block; 
    padding: 10px; 
    text-decoration: none; 
    color: #0000FF; 
    border-bottom: 1px solid #e6e8ea; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1); 
    transition: all 0.3s ease-out; 
} 
.wrapper-dropdown-3 .dropdown option i { 
    float: right; 
    color: inherit; 
} 
.wrapper-dropdown-3 .dropdown option:first-of-type a { 
    border-radius: 7px 7px 0 0; 
} 
.wrapper-dropdown-3 .dropdown option:last-of-type a { 
    border-radius: 0 0 7px 7px; 
    border: none; 
} 
/* Hover state */ 
.wrapper-dropdown-3 .dropdown option:hover a { 
    background: #f3f8f8; 
} 
.wrapper-dropdown-3 .dropdown:after { 
    content:""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    bottom: 100%; 
    right: 15px; 
    border-width: 0 6px 6px 6px; 
    border-style: solid; 
    border-color: #fff transparent; 
} 
.wrapper-dropdown-3 .dropdown:before { 
    content:""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    bottom: 100%; 
    right: 13px; 
    border-width: 0 8px 8px 8px; 
    border-style: solid; 
    border-color: rgba(0, 0, 0, 0.1) transparent; 
} 
.wrapper-dropdown-3.active .dropdown { 
    opacity: 1; 
    pointer-events: auto; 
}