ロールオーバーでメニューオープン（ドロップダウンメニュー）

マウスオーバーで下層メニューが表示されるナビゲーションです。
無駄なCSSは取り除いたシンプルなサンプルコードで掲載。
※ページにはjQuery本体を読み込んでおく。

サンプルページはこちら

HTML

<div id="navi">
	<nav>
		<ul class="global">
			<li id="n01" class="dropdown"><div class="n-inner"><a href="" class="over">メニュー<div class="toggle-icon"></div></div>
				<!--メニュー-->
				<div class="overmenu">
					<div class="overmenu-inner cf">
						
						<ul>
							<li><a href="">下層メニュー</a></li>
							<li><a href="">下層メニュー</a></li>
							<li><a href="">下層メニュー</a></li>
							<li><a href="">下層メニュー</a></li>
						</ul>
						
					</div><!--/.overmenu-inner-->
				</div><!--/.overmenu-->
			</li>
			<li id="n02" class="dropdown"><div class="n-inner"><a href="" class="over">メニュー<div class="toggle-icon"></div></div>
				<!--メニュー-->
				<div class="overmenu">
					<div class="overmenu-inner cf">
						
						<ul>
							<li><a href="">下層メニュー</a></li>
							<li><a href="">下層メニュー</a></li>
							<li><a href="">下層メニュー</a></li>
							<li><a href="">下層メニュー</a></li>
						</ul>
						
					</div><!--/.overmenu-inner-->
				</div><!--/.overmenu-->
			</li>
			<li id="n03" class="dropdown"><div class="n-inner"><a href="" class="over">メニュー<div class="toggle-icon"></div></div>
				<!--メニュー-->
				<div class="overmenu">
					<div class="overmenu-inner cf">
						
						<ul>
							<li><a href="">下層メニュー</a></li>
							<li><a href="">下層メニュー</a></li>
							<li><a href="">下層メニュー</a></li>
							<li><a href="">下層メニュー</a></li>
						</ul>
						
					</div><!--/.overmenu-inner-->
				</div><!--/.overmenu-->
			</li>
			<li id="n04"><div class="n-inner"><a href="" class="over">メニュー</a></div></li>
			<li id="n05"><div class="n-inner"><a href="" class="over">メニュー</a></div></li>
			<li id="n06"><div class="n-inner"><a href="" class="over">メニュー</a></div></li>
		</ul>
		
	</nav>
</div><!--/#navi-->

CSS

#navi ul{
	display: flex;
}
#navi ul li{
	flex: 1;
}
#navi ul li ul{
	display: block;
}
.overmenu{
	display: none;
}

JS

/*ナビゲーション（ドロップメニュー）
ーーーーーーーーーーーーーーーーーー*/
$(function(){
	var w = $(window).width();
	var x = 768;
	if (w <= x) {

		$(".dropdown .n-inner .toggle-icon").click(function(){
			$(this).parents(".n-inner").next(".overmenu").slideToggle();
			$(this).toggleClass("open");
		});

	
	} else{
	
		
		//メニューオープン
		var overset= 0;//オーバーしてるか判定
		var openset= 200;//開くまでの時間
		var outset= 300;//閉じるまでの時間
		var sethover = false;
		var outsettimer = false;

		function menuClear(){
			$(".dropdown").children(".overmenu").fadeOut(400);
		}


			$(".dropdown").hover(function(){
				menuClear();
				var $subList = $(this).children('.overmenu');
				$(this).addClass("open");
				sethover = setTimeout(function(){
					overset = 1;
					$subList.fadeIn(400);
				},openset);
				clearTimeout(outsettimer);

			},function(){
				var $subList = $(this).children('.overmenu');
				$(this).removeClass("open");
				outsettimer = setTimeout(function(){
					overset = 0;
					menuClear();
					$subList.fadeOut(400);
				},outset);
				clearTimeout(sethover);
			});

	
	}

});

ドップダウンさせたい メニューにclass=”dropdown”追加。

<div class=”toggle-icon”></div>はスマホ時の開閉アイコン部分（＋、ーなどcssで設定）。

ドロップメニューオープン時は、#navi ul li.dropdownに、openというクラスが追加されます。