入れ子にしたリスト内でマウスを動かすとチラつく

Question

###ul>li>ul>liで、li間を行ったり来たりするとチラついてしまうのを直したいです

親メニューにホバーして出てきた子メニューを選ぶときに、liの境目でチラつくようです。
liの中で入れ子にしてるから、何かの影響を受けてしまっているのかなとは思いますが、
htmlの構成的に、そのようにコーディングしたいです。

バブリングってやつか？と思いましたが、これは親要素に影響するんですよね？
このチラつきの対処法、もしくは、ヒントを頂けましたら幸いです。

私のスキルとしましては、下記のとおりです。

今までコピペだったjqueryのコードを今回初めて自分で書きました。
細かいことは勉強していないです。
とりあえず実現したい動きを検索して作りました。

何か不足がありましたらすみません。
どうぞよろしくお願いします。

###html

<header>
	<img src="img/logo.png" width="200" height="80" alt="logo" class="logo">
	<nav class="header-nav">
		<ul>
			<li>nav01
				<ul class="nav-child">
					<li><a href="">sub-nav01</a></li>
					<li><a href="">sub-nav02</a></li>
				</ul>
			</li>
			<li>nav02
				<ul class="nav-child">
					<li><a href="">sub-nav03</a></li>
					<li><a href="">sub-nav04</a></li>
				</ul>
			</li>
			<li><a href="">nav03</a></li>
			<li><a href="">nav04</a></li>
			<li><a href="">nav05</a></li>
		</ul>
	</nav>
</header>
<div class="contents">
	<h1>サイトコンテンツ</h1>
</div>

###jquery

$(function(){
		var nav_li = $('.header-nav ul li');
		var nav_child = $('.nav-child');
		$(nav_li).hover(function(e) {
			$('.contents').css('margin-top', '50px');
			$(nav_li).children('ul').addClass('shows');
		    $(this).children('ul').show();
		    $(this).children('ul').removeClass('shows');
		    if($(nav_child).hasClass('shows')) {
		    	$('.nav-child.shows').css('display','none');
		    }
		});
		$('.contents').hover(function() {
			$(nav_child).css('display','none');
			$('.contents').css('margin-top', '0');
		});
	});

###css

.contents {
		height:500px;
	}
	body {
		margin:0;
	    background-color: #ccc;
	}
	ul {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
	}
	header {
	  position: relative;
	  padding: 25px 30px;
	  background-color: #333;
	}
	header:after,
	.header-nav ul:after {
	  content: "";
	  display: block;
	  clear: both;
	}

	.logo {
	  float: left;
	}

	.header-nav {
	  float: right;
	  width: 450px;
	  color: #fff;
	}

	.header-nav li {
	  float: left;
	  padding: 15px 20px;
	}
	.header-nav li a {
	  color: #fff;
	}
	.header-nav li ul {
	  display: none;
	  position: absolute;
	  top: 130px;
	  left: 0;
	  width: 100%;
	  background-color: #efefef;
	}
	.header-nav li ul:after {
	  content: "";
	  display: block;
	  clear: both;
	}
	.header-nav li ul a {
	  padding: 15px 20px;
	  color: #333;
	}

Answer 1

こういうことかな？

// var nav_li = $('.header-nav ul li');
// ↓
   var nav_li = $('.header-nav > ul > li');
```**動くサンプル：**[https://jsfiddle.net/hq7gh0t1/](https://jsfiddle.net/hq7gh0t1/)

Comments

[jeaw]

そんな単純なこととは・・・
大変助かりました！ありがとうございます！