Javascript 滑动菜单突出显示不工作

我正在尝试实施，但有一些困难。我必须证明这个问题

HTML:

JavaScript:

/* Menu sliding animation script */
$(function () {

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

    $mainNav.append("<li id='sliding-highlight'></li>");

    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();

});

/*菜单滑动动画脚本*/
$（函数（）{
var$el，leftPos，newWidth；
$mainNav=$（“.top nav ul”）；
$mainNav.append（“
”；
var$slidenghighlight=$（“#滑动高光”）；
$slidenghighlight.width（$（“.current\u page\u item”）.width（）
.height（$mainNav.parent（）.height（））
.css（“左”（“.current_page_item a”）.position（）.left）
//.data（“origLeft”，$（“.current\u page\u item a”）.position（）.左）
.data（“origWidth”，$slidenghighlight.width（））；
$（“.top nav li a”）。悬停（函数（）{
$el=$（此项）；
leftPos=$el.position（）.left；
newWidth=$el.parent（）.width（）；
$slidenghighlight.stop（）.animate({
左：左位置，
宽度：newWidth，
背景颜色：$el.attr（“rel”）
})
}，函数（）{
$slidenghighlight.stop（）.animate({
左：$slidenghighlight.data（“origLeft”），
宽度：$slidenghighlight.data（“origWidth”）
});
});
/*开动脑筋*/
$（“.current_page_item a”）.mouseenter（）；
});

我现在知道有两个问题：

未在脚本创建的li项上设置高度

当悬停事件触发时，未设置left position属性

我知道用于获取高度和左位置的选择器很好，因为其他属性（如宽度）设置正确

---

有什么建议吗？

我认为position（）方法有问题，请尝试offset（）方法我已在[fiddler][1]中更新了您的代码，请检查并告知我您有任何问题

jsfiddle.net/3C89r/3/

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
}

/* Menu sliding animation script */
$(function () {

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

    $mainNav.append("<li id='sliding-highlight'></li>");

    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();

});