CSSはドロップダウンメニューを実装します
序文
今日は、cssを使って友達のためにドロップダウンメニューの小さなデモを書きました。とてもラフです。皆さんが学び、使用できるように、ここで共有します。
コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单demo</title>
<style type="text/css">
*{
padding: 0;
margin: 0
}
a{
text-decoration:none;
width: 100px;
}
div.select-menu {
position: absolute;
width: 100px;
height: 20px;
background: #b2bec3;
}
div.select-menu ul {
position: relative;
width: 100px;
height: auto;
list-style: none;
text-align: center;
background: #b2bec3;
padding-top: 5px;
padding-bottom: 5px;
}
div.select-menu ul:nth-child(2){
display: none;
}
div.select-menu:hover ul:nth-child(2){
display: block;
}
div.select-menu ul li{
position: relative;
height: 20px;
padding: 5px;
}
div.select-menu ul li:hover{
background: #FFF;
}
</style>
</head>
<body>
<div class="select-menu">
<ul>下拉菜单</ul>
<ul>
<li><a href="">选项1</a></li>
<li><a href="">选项2</a></li>
<li><a href="">选项3</a></li>
<li><a href="">选项4</a></li>
</ul>
</div>
</body>
</html>
効果
このブログの他の記事で推奨されています
ネイティブjsはCSS疑似クラス要素を取得し、属性を設定します
ボールの着地効果を模倣し、最後に地面で停止します（シミュレーション効果、CSS実装）
小さなボールを無限にバウンドさせてください〜（CSSはボールの無限のバウンドを実現します）
愛の画面があるとしたら、誰にあげますか？（521個のハートをランダムに生成するためのネイティブjsおよびcssの単純な実装）