誰かが今日言った別の例を見てみましょう:純粋なCSSドロップダウンメニュー:
複製図
これの実装は非常に単純です。主に、ホバーおよび遷移属性遷移の使用です。
コード:
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css </title> <style> *{margin:0;パディング:0;フォントサイズ:16px;フォントファミリー:「Microsoft Yahei」; } #container {width:100px;マージン:0 Auto;テキストアライグ:センター;位置:相対; } #container ul {list-style:none; } #container span {display:inline-block;幅:100px;高さ:30px; Line-Height:30px;カーソル:ポインター; } #container ul {height:0;幅:100px;オーバーフロー:隠し;遷移:すべて1S;位置:絶対;トップ:30px;左:0px; } #container:Hover UL {height:330px; } #container ul li {background:#eee;マージントップ:3px;カーソル:ポインター;高さ:30px; Line-Height:30px; } </style> </head> <body> <div id = "container"> <span>モバイル</span> <ul> <li> 1ここ</li> <li> 2ここ</li> <li> 3ここ</li> <li>ここ</li> <li> 5ここ</li> <li> 5ここで</li> </ul> </div> </body> </html>ULはスケーリングオブジェクトであるため、ドキュメントフローから分離する必要があります。レイアウトが実用的であれば、レイアウトには影響しません。絶対的な位置を与えるだけです。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。