Ok so I am new to Jquery and have just started reading through Sitepoint's Jquery: Novice to Ninja book. At this point I am trying to script a navigation bar that has a div highlight the background of each link in an unordered list. I've literally copied the code straight out of book just to be sure that I wasn't making any mistakes but the issue still exists.
<body>
<div id="container">
<div id="header">
<div id="hiddenHeader"><img src="Jquery.png" width="780" height="150" /></div>
<!-- Header that hides -->
</div><!-- End Header -->
<div id="contentBg">
<ul id="navigation">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div> <!-- Content BG End -->
</div> <!-- End Container -->
</body>
$(function() {
$('<div id="navigation_blob"></div>')
.css({ width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10,
'background-color': '#FFFFFF'})
.appendTo($('#navigation')); // Creates nav blob
$('#navigation a').hover(function() {
$('#navigation_blob')
.animate({width: $(this).width() + 10, left: $(this).position().left},
{duration: 'slow', easing: 'easeOutElastic', queue: 'false'});
}, function() {
$('#navigation_blob')
.stop(true)
.animate({width: 'hide'},
{duration: 'slow', easing: 'easeOutCirc', queue: 'false'})
.animate({left: $('#navigation li:first a').position().left}, 'fast');
})
});
The main issue here is that the highlight div '#navigation_blob' never goes underneath the links. The only action I can achieve from it is making it shoot all the way to the right of the screen and back on mouseover/mouseout. Every other parameter functions correctly except for this. I also followed a suggestion to use the css.offset().left function, yet that did not help the situation at all. How can I overlay this div underneath the links in the unordered list?