JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<ul class="ringtone">
    <li class="ringtone-outer">
        <ul class="ringtone-item">
            <li>设为短信铃声</li>
            <li>设为来电铃声</li>
            <li>设为闹钟铃声</li>
        </ul>
    </li>
</ul>

CSS

.ringtone{
    width:150px;
    position:relative;
}
ul, li{
    margin:0;
    padding:0;
    list-style:none;
}
.ringtone .ringtone-outer{
    width:112px;
    height:23px;
    background:url("http://127.0.0.1/resources/MusicManager/ringtone.png") no-repeat 0 0;
}
.ringtone .ringtone-outer:hover{
    background-position:0 -23px;
}
.ringtone:hover .ringtone-item{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    border:1px solid #BDBDBD;
}
.ringtone-item{
    display:none;
    width:110px;
    background-color:#FFF;
}
.ringtone-item li{
    line-height:29px;
    height:29px;
    color:#717171;
    text-align:center;
    font-size:12px;
}
.ringtone-item li:hover{
    background-color:#228EED;
    color:#FFF;
}