この記事では、HTML+CSSを使用してマウスを実装する2番目のレベルのメニューバーの例を紹介します。
最初のエフェクト図面：
1.マウスは上にありません
2。最初のレベルのメニューにマウスを置き、セカンダリメニューを展開します
3.セカンダリメニューにマウスを置きます
コード：
<html> <head> <title>セカンドレベルのメニューテスト</title> <meta charset = utf-8> <style type = text/css>/*中央にメニューを作成するために*/body {padding -top：100px; center;} / * ---------------------------------------------------- -------------------------------------------------------------- -------------------------------------------------------------- -------------------------------------------------------------- ------------------ * / .Menudiv {Border：2px Solid #AAC：hidden：} / *タグのダウンライン* / .menudiv a {none;} /* li style* / .men udiv ul、.menudiv li {list-style：none：0; float：left;} /* 2番目のメニューを設定し、非表示* /.menudiv> ul {position：none;} /* 2番目のレベルメニューのスタイルを設定します/.menudiv> li> ul> li {float：none;} /*最初のレベルのメニューに配置されたマウス、セカンダリメニューの表示-LEVELメニュー> aight：cfe; } /*最初のレベルのメニューでは、最初の左ボックス* /.menudiv> li：first-child> a {border-hered：none;} /*ファーストクラスメニューでは、マウスのスタイルが配置されています* /.menudiv> ul> li> a：hover {color：＃f0f;} /*セカンドレベルのメニュー* /.menudiv> ul> li> a {width：120px;ラインハイト：＃456;トップベゼルの設定* / .menudiv> li> li：first-child> a {border-top：1px solid #ccc;} /*セカンダリメニューでは、マウスのスタイルが配置されます* / .menudiv> ul > li> li> a：hover {color：＃a4f;} / * --------------------------------------- - 終わり - - - - - - - - - - - - - - - - - - - - - - - - -------------------------------------------------------------- ------ボディ> <-------メニューHTMLコード-------------------> <Div class = menudiv> <ul> <li> <a href =＃>メニュー1 </a> <ul> <li> <a href =＃> 2つのレベルメニュー</a> </li> <a href = ＃>セカンダリメニュー</a> </li> <li> <a href =＃>セカンドレベルメニュー</a> </li> </ul> </li> <li> <a href =＃>メニュー2 </a> <ul> <li> <a href =＃> 2番目のレベルメニュー</a> </li> <li> <a href =＃> 2つのレベルメニュー</a> </li > </li> <li> <li> <a href =＃>メニュー3 </a> <ul> <li> <a href =＃>セカンダリメニュー</a> </li> <a href =＃ >セカンダリメニュー</a> </li> <li> <a href =＃> 2番目のレベルメニュー</a> </li> <li> <a href =＃> secondaryメニュー</a> </li > <li> <a href =＃> 2番目のレベルメニュー</a> </li> </ul> </li> <li> <a href =＃>メニュー4 </a> </li> < a href =＃>メニュー5 </a> <ul> <li> <a href =＃> 2番目のメニュー</a> </li> <li> <a href =＃> 2番目のメニュー</a> </ li> <li> <a href =>> iiメニュー</a> </li> </ul> </li> </ul> </div> ---------エンド----------> </body> </html>上記は、この記事のすべての内容です。