As you hover over an element, the position function adjusts its left attribute to the correct value. However, when you move the mouse away, it resets back to 0, causing the element to appear below the first one in the list.
This issue is noticeable when you hover over and leave any list element in the navigation bar, except for the first one.
Check out the code snippet below:
$(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 reviewing my code and providing assistance!