常連

検索してもなかなか思うような結果にたどり着かなかったため質問しました。
どなたかお分かりになる方がいらっしゃいましたら教えていただけると助かります。

### 前提・実現したいこと

[Mega site navigation](https://codyhouse.co/gem/css-mega-site-navigation/)をカスタマイズしています。
パソコンではマウスオーバーで、タブレット、スマホではタップでメガメニューが展開できるようにしたいです。

カスタマイズした主な内容は以下です。
・パソコンでマウスオーバーによるメガメニューの展開を行った。
・class名をjavascriptによって付与したり削除したりできるようにしている。

### 発生している問題・エラーメッセージ

タブレット・スマホで見た際に、親メニューからスタートせず、3番目のメニューから表示されます。

### 該当のソースコード

```HTML
<header class="cd-main-header">
		<a class="cd-logo" href="#">hogehoge</a>
		<ul class="cd-header-buttons">
			<li><a class="cd-nav-trigger" href="#cd-primary-nav"><span></span></a></li>
		</ul> 
	</header>

	<main class="cd-main-content">
		
	</main>

	<div class="cd-overlay"></div>

	<nav class="cd-nav">
		<ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
			<li class="has-children" id="hover01">
				<a href="javascript:void(0)">1階層目メニュー1</a>

				<ul class="cd-secondary-nav" id="second01">
					<li class="go-back"><a href="#">1階層目メニュー1へ戻る</a></li>
					<li class="has-children">
						<a href="#">2階層目メニュー1</a>

						<ul class="is-hidden">
							<li class="go-back"><a href="#0">2階層目メニュー1へ戻る</a></li>
							<li class="has-children">
								<a href="#0">3階層目メニュー1</a>

								<ul class="is-hidden">
									<li class="go-back"><a href="#0">3階層目メニュー1</a></li>
									<li><a href="#">4階層目メニュー1</a></li>
									<li><a href="#">4階層目メニュー2</a></li>
									<li><a href="#">4階層目メニュー3</a></li>
									<li><a href="#">4階層目メニュー4</a></li>
								</ul>
							</li>
							<li class="has-children">
								<a href="#0">3階層目メニュー2</a>

								<ul class="is-hidden">
									<li class="go-back"><a href="#0">3階層目メニュー2へ戻る</a></li>
									<li><a href="#">4階層目メニュー5</a></li>
									<li><a href="#">4階層目メニュー6</a></li>
									<li><a href="#">4階層目メニュー7</a></li>
									<li><a href="#">4階層目メニュー8</a></li>
								</ul>
							</li>
							<li class="has-children">
								<a href="#0">3階層目メニュー3</a>

								<ul class="is-hidden">
									<li class="go-back"><a href="#0">3階層目メニュー3へ戻る</a></li>
									<li><a href="#">4階層目メニュー9</a></li>
									<li><a href="#">4階層目メニュー10</a></li>
									<li><a href="#">4階層目メニュー11</a></li>
									<li><a href="#">4階層目メニュー12</a></li>
								</ul>
							</li>
						</ul>
					</li>

					<li class="has-children">
						<a href="#">2階層目メニュー2</a>

						<ul class="is-hidden">
							<li class="go-back"><a href="#0">2階層目メニュー2へ戻る</a></li>
							<li><a href="#0">3階層目メニュー4</a></li>
							<li><a href="#0">3階層目メニュー5</a></li>
							<li><a href="#0">3階層目メニュー6</a></li>
							<li><a href="#0">3階層目メニュー7</a></li>
						</ul>
					</li>

					<li class="has-children">
						<a href="#">2階層目メニュー3</a>

						<ul class="is-hidden">
							<li class="go-back"><a href="#0">2階層目メニュー3へ戻る</a></li>
							<li><a href="#0">3階層目メニュー8</a></li>
							<li><a href="#0">3階層目メニュー9</a></li>
							<li><a href="#0">3階層目メニュー10</a></li>
							<li><a href="#0">3階層目メニュー11</a></li>
						</ul>
					</li>

					<li class="has-children">
						<a href="#">2階層目メニュー4</a>

						
					</li>
				</ul>
			</li>

			<li class="has-children" id="hover02">
				<a href="javascript:void(0)">1階層目メニュー2</a>

				<ul class="cd-secondary-nav" id="second02">
					<li class="go-back"><a href="#0">1階層目メニュー2へ戻る</a></li>
					<li>
						<a class="cd-nav-item item-1" href="#">
							2階層目メニュー5
						</a>
					</li>

					<li>
						<a class="cd-nav-item item-2" href="#">
							2階層目メニュー6
						</a>
					</li>

					<li>
						<a class="cd-nav-item item-3" href="#">
							2階層目メニュー7
						</a>
					</li>

					<li>
						<a class="cd-nav-item item-4" href="#">
							2階層目メニュー8
						</a>
					</li>
				</ul>
			</li>

			<li class="has-children" id="hover03">
				<a href="javascript:void(0)">1階層目メニュー3</a>

				<ul class="cd-secondary-nav" id="second03">
					<li class="go-back"><a href="#0">1階層目メニュー3へ戻る</a></li>
					<li>
						<a class="cd-nav-item item-1" href="#">
							2階層目メニュー5
						</a>
					</li>

					<li>
						<a class="cd-nav-item item-2" href="#">
							2階層目メニュー6
						</a>
					</li>

					<li>
						<a class="cd-nav-item item-3" href="#">
							2階層目メニュー7
						</a>
					</li>

					<li>
						<a class="cd-nav-item item-4" href="#">
							2階層目メニュー8
						</a>
					</li>
				</ul>
			</li>

			<li><a href="#">1階層目メニュー4</a></li>
            <li><a href="#">1階層目メニュー5</a></li>
		</ul> 
	</nav> 
```
↓追加したCSSのみ記載しています。これ以外は現在大元からダウンロードしたものをそのまま使用しています。
```CSS
@media only screen and (min-width: 1024px) {
	#hover01.has-children > #second01,
	#hover02.has-children > #second02,
	#hover03.has-children > #second03 {
		display:none !important;
	}
	
	#hover01.on_hover:hover > #second01,
	#hover02.on_hover:hover > #second02,
	#hover03.on_hover:hover > #second03 {
		position:absolute;
		display:block !important;
	}
}
```
↓JavascriptはテストでHTMLの</body>前に記述しています。
元のJavascriptは変更していません。
```Javascript
<script type="text/javascript">
$('#hover01,#hover02,#hover03').hover( 
function(){$(this).addClass('on_hover')},  
function(){$(this).removeClass('on_hover');}
);
</script>
<script>
$(function() {
  $('.on_hover').mouseover(function(e) {
	$('.cd-secondary-nav').addClass("is-hidden");
    })
  $('.on_hover').mouseout(function(e) {
	$('.cd-secondary-nav').removeClass("is-hidden");
    })
});
</script>
<script>
if(!navigator.userAgent.match(/(iPhone|iPad|Android)/)){
$('#hover01,#hover02,#hover03').children('a').on('click', function(event){
		if( !checkWindowWidth() ) event.preventDefault();
		var selected = $(this);
		if( selected.next('ul').hasClass('is-hidden') ) {
			//desktop version only
			selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
			selected.parent('.has-children').siblings('.has-children').children('ul').addClass('is-hidden').end().children('a').removeClass('selected');
			$('.cd-overlay').addClass('is-visible');
		} else {
			selected.removeClass('selected').next('ul').addClass('is-hidden').end().parent('.has-children').parent('ul').removeClass('moves-out');
			$('.cd-overlay').removeClass('is-visible');
		}
		toggleSearch('close');
	});
}
</script>
```

### 試したこと

上記Javascriptのいずれを削除してみてもエラーの結果は同じでした。

### 最後に

あまりきれいなソースでなくてすみませんが、CSSでのエラーなのかJavascriptでのエラーなのか
判断がつきかねています。アドバイスをお願いします。

	@@ -1 +1 @@
1	- Mega site navigationのカスタマイズ~~に関して~~
1	+ Mega site navigationのカスタマイズで表示がうまくいかない

質問編集履歴