如何在我的jquery菜單中的li項下添加一行？

Question

我不確定從哪里開始，但是我在jquery中完成了菜單。 當您將鼠標懸停在上方時，它會對文本產生一些淡入/淡出效果，並且會手動處理鏈接。

我想添加一條簡單的線，也許在CSS中完成？ 在懸停時也要在每個li下方找到一個項目，滑到懸停的li上，而不僅僅是出現。

我只是不知道從哪里開始，因為我從來沒有真正做到過（最好）沒有圖像。 當您用鼠標離開div時，粗略地需要從某個地方開始並單獨移動ul，然后在任何地方停止，而我想在單擊鏈接時將其保持打開狀態。 我並不是要任何人為我做這件事（除非您覺得喜歡），只是為了指出正確的方向。 我已經看到了一些帶有菜單的免費代碼，並且嘗試使用它們或對其進行建模，但是它們不適用於我的菜單。

小提琴

Answer 1

我前一陣子做了，也許正是您所需要的。 它將計算要懸停的錨點元素的寬度，並將下襯元素（div）增大到其寬度和位置

//underliner
$('#menu a').hover(function(){
    var position = $(this).position(); var width = $(this).width();
    $('#underliner', '#menu').animate({width: width,left: position.left}, 200 );
});
$('#menu').hover(function(){
    $('#underliner', '#menu').animate({opacity: 1}, 200).show();
}, function () {
    $('#underliner', '#menu').animate({opacity: 0}, 200).hide();
});

下划線元素的CSS（根據需要更改高度和bg顏色）

#underliner {
    display: none;
    position: relative;
    height: 5px;
    line-height: 5px;
    font-size: 1px;
    background-color: #44c8f5;
    width: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
}

的HTML

<div id="menu">
    <ul>
        list items with <a href>'s
    </ul>
    <div id="underliner"></div>
</div>

編輯 ：我試圖將其與您的代碼合並，但由於您不包括html，因此我不得不猜測您的“導航欄”的布局方式。 無論如何，請嘗試這個小提琴： http : //jsfiddle.net/c_kick/DuWcz/