ナビゲーションメニューのサブメニューが消える
-
突然の質問失礼いたします。
マテリアル2を利用しているのですが、ヘッダーの下にナビゲーションメニューをcssのみで設置したのですが、サブメニューが1つしか表示されません。
パンくずリストの上部で消えてしまい、2つ目以降は全く表示されず、試しにヘッダーの下全て消してみても2つ以降は表示されないのは何が原因何でしょうか?
/* ナビゲーションメニュー */ /* 子を持つ親メニューにマウスオーバーしたとき、サブメニューを表示する */ .header-navigation-has-children:hover .w { display: block; } .menu { text-align: center; } /* 親メニューをinline-blockにしてセンターに配置 */ .menu > .header-navigation { display: inline-block; padding: .5em .3em; } /* リストの記号を消去 */ .header-navigation { list-style-type: none; } /* サブメニューをabsoluteにするため、親メニューをrelativeに */ .header-navigation-has-children { position: relative; } /* 親メニューにマウスオーバーしたときにカーソルを変更 */ .header-navigation-has-children:hover { cursor: pointer; } /* 子を持つ親メニューにマウスオーバーしたときサブメニューを表示 */ .header-navigation-has-children:hover .sub-menu { display: block; } /* サブメニューをabsoluteにして親メニューの下に配置。スタイルは適宜調整してください */ .sub-menu { display: none; position: absolute; top: 70%; left: 0; width: 100px; background: white; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); padding: 0; } /* サブメニューの境目をわかりやすくするため、一番下の項目以外下線を引いた */ .sub-menu > .header-navigation:not(:last-child) { border-bottom: 1px solid #eee; } /* サブニューのリンクタグをheader-navigationの大きさと合わせ、クリックしやすいようにした */ .sub-menu > .header-navigation a { display: inline-block; width: 100%; height: 100%; padding: .5em 0; } /* サブメニューにマウスオーバーしたときリンクの背景色とテキストカラーを変更 */ .sub-menu > .header-navigation a:hover { background: black; color: white; }
分かる方いますでしょうか?
3件の返信を表示中 - 1 - 3件目 (全3件中)
3件の返信を表示中 - 1 - 3件目 (全3件中)
- トピック「ナビゲーションメニューのサブメニューが消える」には新たに返信することはできません。