jQuery UI菜單欄，位置子菜單絕對左

Question

我已經使用菜單欄小部件創建了jQuery UI導航菜單。它適用於我的預期，除非我希望它的行爲稍有不同。正如你在這裏可以看到http://jsfiddle.net/hcharge/DebVr/子菜單展開並相對於被點擊的鏈接定位。

我想展開並堅持導航欄的左側，無論點擊哪個鏈接，子菜單將始終保持相同的寬度。這樣的形象...

我試圖相對於容器的位置設置和絕對定位的子菜單，但我認爲jQuery UI的定位覆蓋此。任何建議都會很棒，歡呼聲。

編輯：這需要用JS做，因爲它必須是點擊和不叮無縫的觸發下拉式菜單

Answer 1

你爲什麼不都只能用CSS做動作？

見http://jsfiddle.net/DebVr/8/

注：背景爲藍色，以便看到白色邊框。

編輯：

如果你想要一些功能，你可以在以後添加，但我認爲，基礎應與CSS。

見我的代碼有一些功能在這裏：http://jsfiddle.net/DebVr/11/

var links=$('#bar1>li>a').each(function(index,obj) { 
    obj.tabindex=index+1; 
}); 
$('#bar1>li>a').focus(
    function(){$(this).siblings('ul').show();} 
); 
$('#bar1>li>a').blur(
    function(){$('#bar1>li>ul').hide();} 
); 

編輯2：

如果你想點擊時再隱藏子菜單中，使用下面的代碼：

var links=$('#bar1>li>a').each(function(index,obj) { 
    obj.tabIndex=index+1; 
}); 
$('#bar1>li>a').focus(function(){ 
    $(this).siblings('ul').addClass('show'); 
}); 
$('#bar1>li>a').mousedown(function(){ 
    $(this).siblings('ul').toggleClass('show'); 
}); 

$('#bar1>li>a').blur(function(){ 
    $(this).siblings('ul').removeClass('show'); 
}); 

和CSS：

#bar1>li>ul.show{ 
    display:block; 
} 

見這裏：http://jsfiddle.net/DebVr/16/

編輯3：

在上面的代碼，我換成obj.tabindex與obj.tabIndex，並更新了的jsfiddle。

問題是，如果你點擊子菜單，錨點失去焦點，然後子菜單消失。在Chrome上，它可以很容易地修復設置focus事件到#bar1>li而不是#bar1>li>a，但事件不能在Firefox上工作...我正在解決方案，但同時你可以使用http://jsfiddle.net/DebVr/16/。

編輯4：

最後，固定碼：http://jsfiddle.net/DebVr/18/

它適用於Chrome，Firefox和IE瀏覽器。