この記事では主に純粋な CSS でドロップダウン メニューを実装するサンプル コードを紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
ドロップダウンメニューのUL高さを0に設定し、余分な部分を非表示にします。
トランジション効果を追加するドロップダウンメニューの高さを設定します。高さが自動の場合、トランジション効果は無効になります。
<style> ul{ list-style: none; margin: 0; padding: 0; } ul li a{ display: block; text-decoration: none; width: 100px; height: 50px; text-align: center; line-height: 50px; color: white; background-color: #2f3e45; } .drop-down{ width: 100px; height: 50px; } .drop-down-content{ opacity: 0; height: 0; overflow: hidden; transition: all 1s ease; } p{ font-size: 20px; margin: 0; } .drop-down-content li:hover a{ background-color: red; } .nav .drop-down:hover .drop-down-content{ opacity: 1; height: 150px; } </style> <ul class="nav"> <li class="drop-down"> <a href="#">下拉菜单</a> <ul class="drop-down-content"> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> </ul> </li> </ul> <p>内容</p>
レンダリングは次のとおりです:
関連する推奨事項:
ドロップダウン メニュー メソッド共有の jQuery 実装
使い方ドロップダウン メニューを完了するための Vue のカスタム手順
CSS3 を使用してアニメーション化されたドロップダウン メニュー効果を実装する手順
以上が純粋な CSS を使用してドロップダウン メニューを実装する方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。