CSS 使用CSS3媒体屏幕从水平菜单转到下拉菜单

Posted 2021-05-23

<style>
#single {display:none;}

@media screen and (max-width: 600px) {
    #single {
        color: black;
        width: 42px;
        height: 30px;
        background: #ECEBEB url(images/menu-icon.png) no-repeat 10px center;
        padding: 8px 10px 0 42px;
        cursor: pointer;
        border: solid 1px #666;
        display: block;
    }
    #container:hover > #multiple{
        display:block;            
    }
    #multiple{
        clear: both;
        position: absolute;
        top: 38px;
        width: 160px;
        z-index: 10000;
        padding: 0px;
        background: #F8F8F8;
        border: solid 1px #999;
        display: none;
    }
}

#multiple li {
    list-style: none;
    float: left;
    background-color:pink;
    padding: 4px 15px;
    margin:5px;
    width:100px;
}�
</style>

<div id="container">
    <div id="single">My Family</div>
    <ul id="multiple">
        <li>ryan</li>
        <li>val</li>
        <li>alex</li>
        <li>mason</li>
        <li>angelina</li>
        <li>madison</li>
    </ul>
</div>�