Javascript jQuery UI菜单栏，位置子菜单绝对左侧

我已经使用menubar小部件创建了一个jQuery UI导航菜单。它的工作方式与我预期的不同，只是我希望它的表现稍有不同。正如您在这里看到的，子菜单向外展开，并相对于单击的链接进行定位

我想它扩大了，并坚持在导航栏的左侧，无论哪个链接被点击，子菜单将始终保持相同的宽度。像这样的图像

我尝试过设置一个相对于容器的位置，并绝对定位子菜单，但是我认为jqueryui定位正在覆盖它。任何建议都很好，干杯

---

编辑：这需要用JS来完成，因为它必须是点击，而不是触发下拉菜单的悬停动作

为什么不只用CSS来完成呢

看

注意：背景为蓝色，以便看到白色边框

编辑：

如果您想要一些功能，可以稍后添加，但我认为基础应该是CSS

请在此处查看我的代码和一些功能：

编辑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;
}

请看这里：

编辑3：

在上面的代码中，我用

obj.tabindex

替换了

obj.tabindex

，并更新了JSFIDLE

问题是如果你点击子菜单，锚就会失去焦点，然后子菜单就会消失。在Chrome上，可以很容易地将

焦点

事件设置为

#bar1>li

而不是

#bar1>li>a

，但是在firefox上该事件不起作用。。。我正在研究一个解决方案，但同时你可以使用

编辑4:

最后，固定代码：

---

它可以在Chrome、Firefox和IE上使用。

我担心它只能单击，不能使用鼠标悬停，而且链接需要能够在彼此之间使用标签，非常感谢这一实现…@hcharge看到我编辑过的答案，我添加了一些功能。非常感谢，它看起来非常好，而且在正确的轨道上，我只是不知道如何让它单击以显示子ul，然后单击关闭以再次隐藏，您知道如何实现这一点吗？再次感谢您的帮助非常感谢您的最新修订，它仍然没有真正的工作，如果您单击另一个链接，那么您所在的链接就不会关闭，如果您像我原来的Fiddle一样单击下拉列表之外，它也需要关闭。这是难以置信的，非常感谢您的辛勤工作，比jquery ui方法好得多。。。

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