前提・実現したいこと
下記のサイトのドロップダウンメニューを作りたい
参考
発生している問題・エラーメッセージ
サイトを参考にドロップダウンメニューを作っているのだがMenu1にhoverした時にchirdの幅がMenu1と同じにならない。 これを揃えたい。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <title>Document</title> 8</head> 9<body> 10 <ul class="gnav"> 11 <li> 12 <a href="#">Menu1</a> 13 <ul> 14 <li><a href="#">Child1</a></li> 15 <li><a href="#">Child2</a></li> 16 <li><a href="#">Child3</a></li> 17 <li><a href="#">Child4</a></li> 18 <li><a href="#">Child5</a></li> 19 </ul> 20 </li> 21 <li><a href="#">Menu2</a></li> 22 <li><a href="#">Menu3</a></li> 23 <li><a href="#">Menu4</a></li> 24 <li><a href="#">Menu5</a></li> 25 </ul> 26 27</body> 28</html>
scss
1.gnav{ 2 display: flex; 3 height: 2rem; 4 margin: 0 auto; 5 width: 1000px; 6 7 &>li{ 8 width: 25%; 9 } 10 li{ 11 list-style: none; 12 position: relative; 13 &:hover >ul >li{ 14 height: 2rem; 15 overflow: visible; 16 } 17 a{ 18 background: #001b34; 19 border: 1px solid #eee; 20 color: #fff; 21 display: block; 22 height: 2rem; 23 line-height: 2rem; 24 text-align: center; 25 text-decoration: none; 26 width: 100%; 27 } 28 29 ul{ 30 li{ 31 height: 0; 32 overflow: hidden; 33 transition: .5s; 34 width: 100%; 35 a{ 36 border-top: 1px solid #eee; 37 display: block; 38 width: 100%; 39 } 40 } 41 } 42 43 } 44 45}
試したこと
サイトのコードをコピペしてみたがダメだった。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/19 02:18
2020/05/19 02:20 編集
2020/05/19 02:43