質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

792閲覧

hoverするとプルダウンするメニューについて

ema-material

総合スコア29

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/05/19 08:50

ハマってしまったのでご教示いただけますと助かります。

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

上記HTMLでは、a.usenaviul.accshow は兄弟の関係にあります。親子関係になっていません。
HTMLをそのままとするなら、hover自の.accshowは隣接兄弟結合子 +を使って指定しなければなりません。
https://developer.mozilla.org/ja/docs/Web/CSS/Adjacent_sibling_combinator

> は子結合子です。
https://developer.mozilla.org/ja/docs/Web/CSS/Child_combinator

css

1 .usenavi:hover + .accshow { 2 display: block; 3 }

上記の記載だけでとりあえずメニューの表示はできるでしょう。

投稿2021/05/19 09:23

hope_mucci

総合スコア4447

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ema-material

2021/05/19 11:41

ありがとうございます。 html側が普段理解しているナビゲーションと違って組んでしまっていたということですね。 このあたりまだ知識が不安定でなんとなくこなしているので、今回はいい勉強の機会になりました。 大変勉強になりました。
guest

0

ベストアンサー

こんな感じでは?

css

1.headernavi_wrapper>li>ul{ 2display:none; 3} 4.headernavi_wrapper>li:hover>ul{ 5display:block; 6}

投稿2021/05/19 09:05

yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ema-material

2021/05/19 09:14

ありがとうございます!すごすぎる! headernavi_wrapper>li:hover>ul ↑これはどのように読むのでしょうか? headernavi_wrapper の下部の li を hover するとulを開く でしょうか? この辺り本当に苦手です。
yambejp

2021/05/19 09:17

headernavi_wrapperクラスの直下のliにhoverすると その直下ulの非表示を表示に変えるということです
ema-material

2021/05/19 09:21

勉強になりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問