誰かが今日言った別の例を見てみましょう：純粋な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をもっとサポートすることを願っています。