jQuery slide effects clashing with jQuery UI position

Question

when you mouse over an element the position function alters its left attribute to the correct value, however when you mouse out it is reset back to 0 to appear below the first element in the list.

The problem can only be seen if you mouse enter and leave over any list element in the navigation bar besides the first one.

Here is the code:

$(document).ready(function() {
	$('.nav_item').mouseenter(function() {
		var listNode = $(this);
		
		// must be called first before the position call (no clue why)
		$('#nav_sub_list').stop().slideDown('normal');
		
		$('#nav_sub_list').position({
			of: listNode,
			my: "left top",
			at: "left bottom",
			collision: "fit none"
		});
		
		// left will not be 0 for all <li> elements except the first
		console.log($('#nav_sub_list').position());			
		console.log("mouse in");		
	});
	
	$('#nav_sub_list').mouseout(function() {
		// will reset left back to 0
		console.log($('#nav_sub_list').position());
		
		$('#nav_sub_list').stop().slideUp('normal');
		
		// left will be 0
		console.log($('#nav_sub_list').position());
		console.log("mouse out");
	});
});

#nav_sub_list {
	position: absolute;
	top: 40px;
	width: 200px;
	height: 200px;
	background-color: pink;
	display: none;
}

ul.h_btn_list li { 
	display: inline;
	padding: 10px;
	color: white;
	width: 100%;
	font-weight: bold;
}

li.nav_item {
	position: relative;
}

#nav_bar {
	position: relative;
	z-index: 2;
}

#nav_bar ul {
	margin: 0px 5%;
	background-color: #005eff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 3px transparent;
	padding: 10px;
	float: right;
	-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
	-moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="nav_bar">
	<ul class="h_btn_list">
		<li class="nav_item">Home
			<div id="nav_sub_list"></div>
		</li>
		<li class="nav_item">Community</li>
		<li class="nav_item">Downloads</li>
		<li class="nav_item">Contact Us</li>
	</ul>	
</div>

Thank you for helping me out or looking at my code!

Answer 1

Code not working properly because in html "#nav_sub_list" div is inside the first li that's why on mouse over of "#nav_sub_list" make $('.nav_item').mouseenter(function() { code running

Puting <div id="nav_sub_list"></div> outside will solve your problem.

$(document).ready(function() {
	$('.nav_item').mouseenter(function() {
		var listNode = $(this);
		
		// must be called first before the position call (no clue why)
		$('#nav_sub_list').stop().slideDown('normal');
		
		$('#nav_sub_list').position({
			of: listNode,
			my: "left top",
			at: "left bottom",
			collision: "fit none"
		});
		
		// left will not be 0 for all <li> elements except the first
		console.log($('#nav_sub_list').position());			
		console.log("mouse in");		
	});
	
	$('#nav_sub_list').mouseout(function() {
		// will reset left back to 0
		console.log($('#nav_sub_list').position());
		
		$('#nav_sub_list').stop().slideUp('normal');
		
		// left will be 0
		console.log($('#nav_sub_list').position());
		console.log("mouse out");
	});
});

#nav_sub_list {
	position: absolute;
	top: 40px;
	width: 200px;
	height: 200px;
	background-color: pink;
	display: none;
}

ul.h_btn_list li { 
	display: inline;
	padding: 10px;
	color: white;
	width: 100%;
	font-weight: bold;
}

li.nav_item {
	position: relative;
}

#nav_bar {
	position: relative;
	z-index: 2;
}

#nav_bar ul {
	margin: 0px 5%;
	background-color: #005eff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 3px transparent;
	padding: 10px;
	float: right;
	-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
	-moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="nav_bar">
	<ul class="h_btn_list">
		<li class="nav_item">Home
			
		</li>
		<li class="nav_item">Community</li>
		<li class="nav_item">Downloads</li>
		<li class="nav_item">Contact Us</li>
	</ul>	
</div>
<div id="nav_sub_list"></div>