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/

Answer 2

看看这个jsfiddle：http: //jsfiddle.net/q55L2/

我为此使用了jquery。

html

<div class="option">    
</div>
<div class="option-list" style="display:none">
    <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（部分 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.chosen {
    display:inline-block;
    position: absolute;
    top: 0;
    margin:0;
    padding:0;
    padding-left:14px;
}
span.superscript {
    vertical-align: super;
    font-size:50%;
}
.option-list {
    border: 1px solid #ccc;
}
.option-list > p {
    display:block;
    padding:0;
    margin:0;
    padding-left:14px;
    position:relative;
    z-index:2;    
}
.option-list > p:hover {
    color:#fff;
    background:blue;
}

jQuery

$(function () {
    $('div.option').append($('div.option-list p.chosen').clone());
    $('div.option').on('click', function (e) {
        $('div.option-list').width(55);
        $('div.option-list').show();
        $('div.option-list p.chosen').hide();        
        event.stopPropagation();
    });
    $('div.option-list p').on('click', function(){
            $($('div.option-list').find('p.chosen')).show();
            $($('div.option-list').find('p.chosen')).removeAttr('class');
            $(this).addClass('chosen');
            $('div.option').empty();
            $('div.option').append($(this).clone());
        });
    $('body').on('click', function(){
        $('div.option-list').hide();
    });
});