メガドロップダウンメニューでメニューがうまく切り替えられない不具合の対応

文章では説明しにくいのですが、メガドロップダウンメニューでナビBからナビAに切り替えた際に、ナビBのメニューがフェードアウトする前にオンマウスするとナビBが開いてしまう不具合が個人的にたまにあるので、対応方法をメモしておきます。

サンプルコード

まずは対応前のサンプルです。

HTML

<header class="l-header">
	<nav class="l-gnav">
		<ul class="l-gnav-lv1">
			<li class="l-gnav-lv1__item">
				<a href="" class="l-gnav-lv1__link">ナビA</a>
				<ul class="l-gnav-lv2">
					<li class="l-gnav-lv2__item">
						<a href="" class="l-gnav-lv2__link">ナビゲーションA-1</a>
					</li>
					<li class="l-gnav-lv2__item">
						<a href="" class="l-gnav-lv2__link">ナビゲーションA-2</a>
					</li>
					<li class="l-gnav-lv2__item">
						<a href="" class="l-gnav-lv2__link">ナビゲーションA-3</a>
					</li>
				</ul>
			</li>
			<li class="l-gnav-lv1__item">
				<a href="" class="l-gnav-lv1__link">ナビB</a>
				～ 略 ～
			</li>
			<li class="l-gnav-lv1__item">
				<a href="" class="l-gnav-lv1__link">ナビC</a>
				～ 略 ～
			</li>
		</ul>
	</nav>
</header>

CSSは必要な部分のみ抜粋しています。

CSS

.l-gnav-lv1 {
	position: relative;
	height: 54px;
}
.l-gnav-lv1__item {
	display: inline-block;
}
.l-gnav-lv2 {
	position: absolute;
	top: 54px;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 2000ms, visibility 2000ms;
}
.l-gnav-lv1__item:hover .l-gnav-lv2 {
	opacity: 1;
	visibility: visible;
}
.l-gnav-lv2__item {
	display: inline-block;
}

これで簡単ですがメガドロップダウンメニューが実装できました。
メガドロップダウンメニューのデモページ
基本的には問題ないのですが、ナビBにオンマウスした状態からナビA→ナビAの下層 と早めにオンマウスを移動すると、ナビBの内容が表示されます。
これは重なり順が下からナビA→ナビB→ナビCの順になっているので、ナビBが完全に非表示になる前にナビAの下層にオンマウスしようとすると、ナビBの下層がオンマウスに反応するためです。
　

対応方法ですが、下層のオンマウス前とオンマウス後でz-indexを変えることで対応できます。
以下は追加部分のみ抜粋しています。

CSS

.l-gnav-lv2 {
	z-index: 1;
}
.l-gnav-lv1__item:hover .l-gnav-lv2 {
	z-index: 2;
}

これで重なり順が変更されるため、きちんと表示が変更されるようになりました。
メガドロップダウンメニューのデモページ2
　

もしくは、pointer-eventsを使って直接ナビの下層にオンマウスした場合は反応しないようにしてみます。

CSS

.l-gnav-lv2 {
	pointer-events: none;
}
.l-gnav-lv1__item:hover .l-gnav-lv2 {
	pointer-events: auto;
}

通常はpointer-events noneで、上層メニューを経由して下層メニューに来た場合は反応するので、表示が切り替わるようになりました。
メガドロップダウンメニューのデモページ3