jQuery MagicLine Navigation Debug

Fix for jquery http://css-tricks.com/jquery-magicline-navigation/ change li to display inline-block

HTML

<div class="nav-wrap">
 <ul class="group" id="example-one" class="">
    <li class=""><a href="#">Home</a></li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
 </ul>
</div>

CSS

.nav-wrap { margin: 50px auto;  background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; }
#example-one { 
    height:100px;
    margin: 0 auto; 
    list-style: none; 
    position: relative; 
    width: 460px; }
#example-one li { display: inline-block; }
#example-one li a { 
    color: #bbb; 
    font-size: 14px; 
    display: block; 
    float: left; 
    padding: 6px 10px 4px 10px; 
    text-decoration: none; 
    text-transform: uppercase; 
}
#example-one li a:hover { color: white; }
#magic-line { 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 100px; 
    height: 2px; 
    background: #fe4902; 
}
body{
    background:#333;
}

JavaScript

$(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one");
    
    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");
    
    $($magicLine)
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#example-one li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
});