ハマってしまったのでご教示いただけますと助かります。
class名usenaviをhoverすると
class名manuSmall_childが現れるようにしたいです。
class名accshowを
height:0;
overflow:hidden;
display:none;
visibility: hidden;
にした上で
.usenavi:hover > .accshow{
display: block;
overflow: visible;
visibility: visible;
にすればよいと思い込んでいたのですが、違いますでしょうか?
ご回答をお待ちしております。よろしくお願いします。
html
1<ul class="headernavi_wrapper"> 2<li><a href="#" class="joinnow">今すぐ参加</a></li> 3<li class="menuLarge"> 4<a href="#" class="usenavi">ご利用ナビ</a> 5<ul class="accshow"> 6<li class="menuSmall"><a href="#" class="manuSmall_child">子供ナビ<br>1行目</a></li> 7<li class="menuSmall"><a href="#" class="manuSmall_child">子供ナビ<br>2行目</a></li> 8</ul> 9</li> 10<li><a href="#" class="contact">お問い合わせ</a></li> 11</ul>
css
1.headernavi_wrapper{ 2 display: flex; 3 flex-direction: row; 4 margin-top:18px; 5 margin: 0 auto; 6 padding: 0; 7 position: relative; 8 z-index: 5; 9 10} 11 12.joinnow{ 13 text-align: center; 14 display: block; 15 padding:16px 0; 16 color: #121212; 17 width: 214px; 18 font-size:1.8rem; 19 border-left:solid 1px #121212; 20 border-top:solid 1px #121212; 21 border-bottom:solid 1px #121212; 22 border-right:dotted 1px #121212; 23 position: relative; 24 transition: all .5s ease; 25 box-sizing: border-box; 26} 27.joinnow::before{ 28 display: block; 29 content: url("../images/small_aroow.svg"); 30 position: absolute; 31 width: 27px; 32 height: 11px; 33 left:10%; 34 top:13px; 35 36} 37.joinnow:hover{ 38 border-bottom: solid 6px #EB7FBC; 39 box-sizing: border-box; 40 padding-bottom:12px; 41 42 43} 44.usenavi{ 45 text-align: center; 46 display: block; 47 padding:16px 0; 48 color: #121212; 49 width: 214px; 50 font-size:1.8rem; 51box-sizing: border-box; 52 border-top:solid 1px #121212; 53 border-bottom:solid 1px #121212; 54 border-right:dotted 1px #121212; 55 position: relative; 56 transition: all .5s ease; 57 58 59} 60.usenavi::before{ 61 display: block; 62 content: url("../images/navi_icon.svg"); 63 position: absolute; 64 width: 19px; 65 height: 19px; 66 left:18%; 67 top:18px; 68 69} 70 71 72.contact{ 73 text-align: center; 74 display: block; 75 padding:16px 0; 76 color: #121212; 77 width: 214px; 78 font-size:1.8rem; 79 border-right:solid 1px #121212; 80 border-top:solid 1px #121212; 81 border-bottom:solid 1px #121212; 82 position: relative; 83 transition: all .5s ease; 84 box-sizing: border-box; 85 86} 87.contact::before{ 88 display: block; 89 content: url("../images/mail_icon.svg"); 90 position: absolute; 91 width: 21px; 92 height: 15px; 93 left:10%; 94 top:18px; 95} 96.contact:hover{ 97 border-bottom: solid 6px #EB7FBC; 98 box-sizing: border-box; 99 padding-bottom:12px; 100} 101 102 103@media only screen and (min-width: 980px){ 104.manuSmall_child{ 105 font-size:1.8rem; 106 padding:15px 0 13px 18%; 107 color: #121212; 108 display: block; 109 border-bottom:dotted 2px #666; 110 position: relative; 111 border-left:dotted 2px #666; 112 border-right:dotted 2px #666; 113 box-sizing: border-box; 114 transition: all .5s ease; 115 background-color: #fff; 116 117 } 118.manuSmall_child::before{ 119 position: absolute; 120 display: block; 121 content: ""; 122 width: 20px; 123 height: 3px; 124 background-color: #121212; 125 top:37px; 126 left:4%; 127 128 } 129.manuSmall_child:hover{ 130 color: #EB7FBC; 131 } 132.manuSmall_child:hover::before{ 133 background-color: #EB7FBC; 134 135 } 136.usenavi:hover{ 137 border-bottom: solid 6px #EB7FBC; 138 box-sizing: border-box; 139 padding-bottom:12px; 140 141 142 } 143.accshow{ 144 width: 100%; 145margin-top:20px; 146 border-top:solid 4px #121212; 147 position: relative; 148 149 z-index: 200; 150 151 152 153 154 } 155.accshow::before{ 156 position: absolute; 157 display: block; 158 content: ""; 159 width: 0; 160height: 0; 161border-style: solid; 162border-width: 0 10px 16px 10px; 163border-color: transparent transparent #121212 transparent; 164 top:-160px; 165 left:0; 166 right: 0; 167 bottom:0; 168 margin:auto; 169 } 170.usenavi:hover > .accshow{ 171 display: block; 172 173 174 175 } 176 177 178 179 180}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/19 11:41