Q&A
HTMLとCSSでプルダウンメニューを作っているのですが、マウスオーバーでメニューを開くと下の本文が連動して下がる事についての対処が上手くいかず困っています。
コードは以下のようになっています。
HTML
1<body> 2 <ul class="menu"> 3 <li><a href="#">メニュー</a> 4 <ul> 5 <li><a href="#">子メニュー</a></li> 6 <li><a href="#">子メニュー</a></li> 7 <li><a href="#">子メニュー</a></li> 8 </ul> 9 </li> 10 <li><a href="#">メニュー</a></li> 11 <li><a href="#">メニュー</a></li> 12 </ul> 13 本文 14 本文 15 本文 16</body>
CSS
1ul,li{ 2 list-style: none; 3 margin: 0; 4 padding: 0; 5} 6ul li a{ 7 display: block; 8 color: #FFFFFF; 9 padding: 8px; 10 text-align: center; 11 text-decoration: none; 12} 13ul.menu li a:hover{ 14 text-decoration: none; 15 color: #FFFFFF; 16 background-color: #147BF9; 17 transition: .3s; 18} 19ul.menu{ 20 width: 100%; 21 display: flex; 22} 23ul.menu > li{ 24 width: 25%; 25} 26ul.menu > li > a{ 27 background-color: #147BF9; 28 border-right: 1px solid #FFFFFF; 29} 30ul.menu > li > ul{ 31 display: none; 32} 33ul.menu li:hover a + ul{ 34 display: block; 35} 36ul.menu > li > ul > li > a{ 37 background-color: #01B6ED; 38 border-top: 1px solid #FFFFFF; 39}
'ul.menu li:hover a + ul' で 'position: absolute;'を使うと一応解決はするのですが、子メニューが本来の半分の領域しか表示されなくなります。他に対処法があるならば知りたいのですが、最適な書き方が分かりません。
よろしくお願いします。
回答1件
0
ベストアンサー
こちらでいかがでしょうか?
CSS
1/* 追加 */ 2ul.menu > li { 3 position: relative; 4} 5ul.menu > li > ul { 6 position: absolute; 7 width: 100%; 8}
すべてのブラウザでの動作を考慮すると、「ul.menu > li > ul」にtop: calc(1em * line-heightの値 + 8px + 8px);などが必要になるかもしれません。「8px」は「ul li a」のpaddingの上下の値です。
投稿2020/05/18 22:10
編集2020/05/18 22:18
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/19 07:58