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

Question

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

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;

にすればよいと思い込んでいたのですが、違いますでしょうか？

ご回答をお待ちしております。よろしくお願いします。

<ul class="headernavi_wrapper">
<li><a href="#" class="joinnow">今すぐ参加</a></li>
<li class="menuLarge">
<a href="#" class="usenavi">ご利用ナビ</a>
<ul class="accshow">
<li class="menuSmall"><a href="#" class="manuSmall_child">子供ナビ<br>1行目</a></li>
<li class="menuSmall"><a href="#" class="manuSmall_child">子供ナビ<br>2行目</a></li>
</ul> 
</li>
<li><a href="#" class="contact">お問い合わせ</a></li>
</ul>

.headernavi_wrapper{
	display: flex;
	flex-direction: row;
	margin-top:18px;
	  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 5;

}

.joinnow{
	text-align: center;
	display: block;
	padding:16px 0;
	color: #121212;
	width: 214px;
	font-size:1.8rem;
		border-left:solid 1px #121212;
	border-top:solid 1px #121212;
	border-bottom:solid 1px #121212;
	border-right:dotted 1px #121212;
	position: relative;
	transition: all .5s ease;
	box-sizing: border-box;
}
.joinnow::before{
	display: block;
	content: url("../images/small_aroow.svg");
	position: absolute;
	width: 27px;
	height: 11px;
	left:10%;
	top:13px;
	
}
.joinnow:hover{
		border-bottom: solid 6px #EB7FBC;
	box-sizing: border-box;
	padding-bottom:12px;
		
	
}
.usenavi{
	text-align: center;
	display: block;
	padding:16px 0;
	color: #121212;
	width: 214px;
	font-size:1.8rem;
box-sizing: border-box;
	border-top:solid 1px #121212;
	border-bottom:solid 1px #121212;
	border-right:dotted 1px #121212;
	position: relative;
	transition: all .5s ease;
	
	
}
.usenavi::before{
	display: block;
	content: url("../images/navi_icon.svg");
	position: absolute;
	width: 19px;
	height: 19px;
	left:18%;
	top:18px;
	
}


.contact{
		text-align: center;
	display: block;
	padding:16px 0;
	color: #121212;
	width: 214px;
	font-size:1.8rem;
		border-right:solid 1px #121212;
	border-top:solid 1px #121212;
	border-bottom:solid 1px #121212;
	position: relative;
	transition: all .5s ease;
	box-sizing: border-box;
	
}
.contact::before{
		display: block;
	content: url("../images/mail_icon.svg");
	position: absolute;
	width: 21px;
	height: 15px;
	left:10%;
	top:18px;
}
.contact:hover{
			border-bottom: solid 6px #EB7FBC;
	box-sizing: border-box;
	padding-bottom:12px;
}


@media only screen and (min-width: 980px){
.manuSmall_child{
		font-size:1.8rem;
		padding:15px 0 13px 18%;
		color: #121212;
		display: block;
		border-bottom:dotted 2px #666;
		position: relative;
	border-left:dotted 2px #666;
	border-right:dotted 2px #666;
	box-sizing: border-box;
	transition: all .5s ease;
	background-color: #fff;
		
	}
.manuSmall_child::before{
		position: absolute;
		display: block;
		content: "";
		width: 20px;
		height: 3px;
		background-color: #121212;
		top:37px;
		left:4%;
		
	}
.manuSmall_child:hover{
		color: #EB7FBC;
	}
.manuSmall_child:hover::before{
	background-color: #EB7FBC;
		
	}
.usenavi:hover{
		border-bottom: solid 6px #EB7FBC;
		box-sizing: border-box;
	padding-bottom:12px;
	
		
	}
.accshow{
		width: 100%;
margin-top:20px;
	border-top:solid 4px #121212;
	position: relative;

	z-index: 200;

	
	

	}
.accshow::before{
		position: absolute;
		display: block;
		content: "";
		width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 16px 10px;
border-color: transparent transparent #121212 transparent;
		top:-160px;
		left:0;
		right: 0;
		bottom:0;
		margin:auto;
	}
.usenavi:hover > .accshow{
		display: block;
	

		
	}




}

Answer 1

上記HTMLでは、a.usenavi と ul.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

  .usenavi:hover + .accshow {
    display: block;
  }

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

Comments

[ema-material]

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

Answer 2

こんな感じでは？

.headernavi_wrapper>li>ul{
display:none;
}
.headernavi_wrapper>li:hover>ul{
display:block;
}

Comments

[ema-material]

ありがとうございます！すごすぎる！

headernavi_wrapper>li:hover>ul

↑これはどのように読むのでしょうか？
headernavi_wrapper の下部の　li を　hover するとulを開く
でしょうか？

この辺り本当に苦手です。

[yambejp]

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

[ema-material]

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