javascript - 有什么方法可以在 css 中设计一个看起来完全像 html 下拉菜单的菜单

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";  
}

Answer 1

这里有一个制作CSS菜单的详细教程:http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/