javascript - 正確にhtmlドロップダウンに見えるcssでメニューをデザインする方法はありますか?

Question

自分のドロップダウン メニューに CSS スタイルが必要です。HTMLドロップダウンに上付き文字を追加できないため。独自のメニューをデザインしようとしましたが、通常のドロップダウン メニューのように見えるメニューをデザインする方法はありますか?助けてください。前もって感謝します。

HTML

<div class="option" onclick="changeClass(this)">
    <p class="chosen">2<span class="superscript">-9</span></p>  
    <p>2<span class="superscript">-8</span></p>  
    <p>2<span class="superscript">-7</span></p>  
    <p>2<span class="superscript">-6</span></p>  
</div>  

CSS

.option {   
    -webkit-appearance: menulist;  
    box-sizing: border-box;  
    align-items: center;  
    border: 1px solid;  
    border-image-source: initial;  
    border-image-slice: initial;  
    border-image-width: initial;  
    border-image-outset: initial;  
    border-image-repeat: initial;  
    white-space: pre;  
    -webkit-rtl-ordering: logical;  
    color: black;  
    background-color: white;  
    cursor: default;   
    position:relative;  
    height:20px;  
    width:10%;  
    z-index:1;  
}  

.option > p {   
    margin:0;   
    padding:0;   
    display: none;  
}  
.option.open > p {  
    display:block;  
    margin-top:-40px;  
    padding-left:14px;  
    position:relative;   
    z-index:2;  
}  

.option.open > p:hover {  
    color:#fff;  
    background:blue;  
}  

.option.open > p:first-child:hover {  
    color:#000;  
    background:none;  

}  

.option > p.chosen {  
    display:inline-block;   
    position: absolute;  
    top: 0;  
    margin:0;   
    padding:0;  
}  

span.superscript { 
    vertical-align: super; 
    font-size:50%; 
}

Javascript

function changeClass(newElement){  
    newElement.className= "open";  
}