メニュードロップダウン　css sass

メニューが多い際に使用することがあるドロップダウンメニューですが、今回は隠れてるメニュー(サブメニュー)の場所もホバーすると
反応するのでさせないようにする方法です。

ドロップダウンメニュー(隠れてるメニュー)には反応させない

<ul class="gnavi">
    <li class="gnavi__list"><a href="">メニュー1階層</a></li>
    <li class="gnavi__list"><a href="">メニュー1階層</a></li>
    <li class="gnavi__list"><a href="">メニュー1階層</a></li>
    <li class="gnavi__list"><a href="">メニュー1階層</a></li>
    <li class="gnavi__list dropdown"><a href="" class="dropdwon__link">メニュー1階層</a>
        <ul class="gnavi__sub">
            <li class="sub__list"><a href="">メニュー2階層</a></li>
            <li class="sub__list"><a href="">メニュー2階層</a></li>
            <li class="sub__list"><a href="">メニュー2階層</a></li>
        </ul>
    </li>
</ul>

.gnavi__list
	display: inline-block
	width: 20%
a
	display: block
	width: 100%
	padding: 10px
	background: #fff
	color: #333333
	text-align: center
&.dropdown
	.gnavi__sub
		height: 0  //表示してない時の高さは0にしておく
		opacity: 0
		visibility: hidden
		-webkit-transition: all .5s
		transition: all .5s
		.sub__list
			border-top: 1px solid #b5b5b5
			li
				width: 100%
	&:hover
		.gnavi__sub					
			visibility: visible
			height: auto  //マウスホバー時に高さを指定して表示させる
			opacity: 1
			-webkit-transition: all .5s
			transition: all .5s