Sliding menu highlight not working
<p>I'm trying to implement <a href="http://css-tricks.com/jquery-magicline-navigation/" rel="nofollow">this sliding menu highlight</a> but having some difficulty. I have <a href="http://jsfiddle.net/raddevon/3C89r/1/" rel="nofollow">a fiddle</a> to demonstrate the problem.</p>

<p>HTML:</p>

<pre><code>&lt;div class="nav top-nav clearfix"&gt;
    &lt;ul&gt;
        &lt;li class="current_page_item"&gt;
            &lt;a href="#" title="Home"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="page_item page-item-880"&gt; 
            &lt;a href="#"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="page_item page-item-948"&gt; 
            &lt;a href="#"&gt;Portfolio&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>body {
    background: #ccc;
}
.nav {
    border:0;
}
.nav ul {
    margin:auto
}
.nav li {
    float:left;
    position:relative
}
.nav li a {
    border-bottom:0
}
.nav li ul.sub-menu, .nav li ul.children {
    margin-top:0;
    border:1px solid #ccc;
    border-top:0;
    position:absolute;
    display:none;
    z-index:8999
}
.nav li ul.sub-menu li a, .nav li ul.children li a {
    padding-left:10px;
    border-right:0;
    display:block;
    width:180px;
    border-bottom:1px solid #ccc
}
.nav li ul.sub-menu li:last-child a, .nav li ul.children li:last-child a {
    border-bottom:0
}
.nav li:hover ul {
    top:auto;
    display:block
}
.nav.top-nav ul {
    margin:0 auto;
    list-style:none;
    position:relative
}
.nav.top-nav ul li {
    display:inline-block
}
.nav.top-nav ul li a {
    position:relative;
    z-index:200;
    display:block;
    float:left;
    padding:6px 10px 4px 10px
}
.nav.top-nav ul li a:hover {
    color:#fff
}
.nav.top-nav ul li#sliding-highlight {
    position:absolute;
    top:0;
    left:0;
    width:100px;
    background:#f2065f;
    z-index:100;
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-top-left-radius:25px;
    -webkit-border-top-right-radius:25px;
    -webkit-border-bottom-right-radius:25px;
    -webkit-border-bottom-left-radius:25px;
    border-radius:25px 25px 25px 25px
}
.nav.top-nav ul .current_page_item a {
    color:#fff
}
.nav .ie6 .top-nav li, .nav .ie7 .top-nav li {
    display:inline
}
</code></pre>

<p>JavaScript:</p>

<pre><code>/* Menu sliding animation script */
$(function () {

    var $el, leftPos, newWidth;
    $mainNav = $(".top-nav ul");

    $mainNav.append("&lt;li id='sliding-highlight'&gt;&lt;/li&gt;");

    var $slidingHighlight = $("#sliding-highlight");

    $slidingHighlight.width($(".current_page_item").width())
        .height($mainNav.parent().height())
        .css("left", $(".current_page_item a").position().left)
        //.data("origLeft", $(".current_page_item a").position().left)
        .data("origWidth", $slidingHighlight.width());

    $(".top-nav li a").hover(function () {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $slidingHighlight.stop().animate({
            left: leftPos,
            width: newWidth,
            backgroundColor: $el.attr("rel")
        })
    }, function () {
        $slidingHighlight.stop().animate({
            left: $slidingHighlight.data("origLeft"),
            width: $slidingHighlight.data("origWidth")
        });
    });

    /* Kick IE into gear */
    $(".current_page_item a").mouseenter();

});
</code></pre>

<p>I have two problems I know of right now:</p>

<ol>
<li>The height isn't being set on the li item created by the script.</li>
<li>The left position attribute is not being set when the hover event fires.</li>
</ol>

<p>I know the selector I'm using to get the height and left position are good because other attributes like the width are being set properly.</p>

<p>Any suggestions how I might make this work?</p>
