Q&A
下記のサイトを参考にCSSだけで作るドロップダウンメニューを作成しています。
https://webdesignday.jp/inspiration/technique/css/5793/
孫階層がSubmenu1にあるときは、真横に並ぶので問題ないのですが、
Submenu4やSubmenu5などに孫階層がある場合、孫要素を押すことができません。
選択した子階層の横に孫階層を表示するように高さを調整するにはどのような方法がありますでしょうか。
HTML
1 2<!DOCTYPE html> 3<html lang="ja"> 4 5<head> 6 7 <meta charset="utf-8" /> 8 9 <title>Home</title> 10 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet" /> 11 12 <style> 13 14@charset "UTF-8"; 15 16* { 17 -webkit-box-sizing: border-box; 18 box-sizing: border-box; 19 color: #333; 20 font-family: "Hiragino Sans"; 21 margin: 0; 22 padding: 0; 23} 24 25*:focus { 26 outline: 0; 27} 28 29a { 30 text-decoration: none; 31} 32 33 34/* nav main-nav*/ 35.main-nav { 36 background-color: #e8eded; 37} 38 39.mnd { 40 background-color: #e8eded; 41} 42 43.main-nav ul { 44 display: flex; 45 max-width: 1050px; 46 margin: 0 auto; 47} 48 49.main-nav>ul>li { 50 padding: 15px 0px; 51 text-align: center; 52 font-size: 11px; 53 display: flex; 54 align-items: center; 55 width: 16.6%; 56 justify-content: center; 57 border-left: 1px solid rgb(0, 0, 0, 0.1); 58 border-right: 1px solid #fff; 59 position: relative; 60 z-index: 10; 61} 62 63.main-nav ul li a { 64 position: relative; 65 font-size: 15px; 66 font-weight: 600; 67} 68 69.mnd::after { 70 right: 7px; 71 content: "\f0d7"; 72 font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands"; 73 font-weight: 900; 74 color: #aacf6b; 75 position: absolute; 76} 77 78/* nav 階層 */ 79.nav { 80 display: flex; 81 height: 2rem; 82} 83 84.nav li { 85 display: block; 86} 87 88.nav li a { 89 display: block; 90 width: 150px; 91 text-align: center; 92 margin: 0 auto; 93 box-sizing: border-box; 94} 95 96.nav li ul { 97 width: 100%; 98 display: block; 99 position: absolute; 100 top: 60px; 101} 102 103/*子階層以降共通*/ 104.nav li li { 105 height: 0; 106 overflow: hidden; 107 transition: .5s; 108 background-color: #e8eded; 109} 110 111.nav li li a { 112 padding: 21px 0; 113 text-align: center; 114} 115 116.nav li:hover > ul > li { 117 height: 60px; 118 overflow: visible; 119} 120 121.nav-menu { 122 background-color: #e8eded; 123} 124 125.nav-hover:hover { 126 background-color: #fff; 127} 128 129 130/*孫階層以降共通*/ 131.nav li ul li ul { 132 left: 100%; 133 position: absolute; 134 top: 0px; 135 width: 100%; 136} 137 138 </style> 139 140</head> 141 142<body> 143 144 <nav class="main-nav pc"> 145 <ul class="nav" style="height:60px; padding-left:-75px;"> 146 147 <li class="nav-hover"><a href="#" class="mnd">MENU1</a> 148 <ul> 149 <li class="nav-hover"><a href="#">Submenu1</a> 150 <ul> 151 <li class="nav-hover"><a href="#">Submenu1-1</a></li> 152 <li class="nav-hover"><a href="#">Submenu1-2</a></li> 153 </ul> 154 </li> 155 156 <li class="nav-hover"><a href="#">Submenu2</a></li> 157 <li class="nav-hover"><a href="#">Submenu3</a> 158 <ul> 159 <li class="nav-hover"><a href="#">Submenu3-1</a></li> 160 <li class="nav-hover"><a href="#">Submenu3-2</a></li> 161 </ul> 162 </li> 163 164 <li class="nav-hover"><a href="#">Submenu4</a> 165 <ul> 166 <li class="nav-hover"><a href="#">Submenu4-1</a></li> 167 <li class="nav-hover"><a href="#">Submenu4-2</a></li> 168 </ul> 169 </li> 170 171 <li class="nav-hover"><a href="#">Submenu5</a> 172 <ul class="bottom-tab"> 173 <li class="nav-hover"><a href="#">Submenu5-1</a></li> 174 <li class="nav-hover"><a href="#">Submenu5-2</a></li> 175 </ul> 176 </li> 177 178 </ul> 179 </li> 180 </ul> 181 </nav> 182 183 184</body> 185 186</html> 187 188
回答1件
0
ベストアンサー
こんにちは。
以下でどうでしょうか。
css
1.nav-hover { 2 position: relative; 3}
投稿2021/02/08 06:59
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/08 07:06