CSS 仅限CSS的菜单

Posted 2021-05-23

<style>
/*  this is it */
div#menuContainer > ul {display:none;}
div#menuContainer:hover > ul {display:block;}
/*  ---------- */

/*  this is styling */
div#menuContainer > ul {
    cursor:pointer;
}

div#menuContainer li:hover {
    background-color:red;
}

div#menuContainer * {
    width:150px;
    border:solid 1px #000;
}
/*  ---------- */
​</style>

<div id="menuContainer">
    <div>Favorite Languages</div>
    <ul>
        <li>CSS3</li>
        <li>Javascript</li>
        <li>c#.net</li>
        <li>PHP</li>
        <li>Java</li> 
    </ul>            
</div>​