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。