如何让jQuery下拉菜单直接向下而不是向右移动？

Question

我有一个非常简单的菜单栏，我使用jQuery，它按预期运行，但我真的希望子菜单直接弹出主菜单下方而不是右侧，如此{{ 3}}你知道我能做到这一点的任何方式吗？这是我第一次使用jQuery（我的第一次使用Javascript），所以我有点迷失了。

这是我的CSS，我认为可能会出现问题，因为列表只是简单的HTML。

#menu-bar{
    height:30px;
    width: 100%;
}

#menu-bar > li{
    float:left;
    width:195px;
}

Answer 1

这样的事情：

$( "#menu-bar" ).menu({ position: { my: "left top", at: "left bottom+2" } });

演示：http://jsfiddle.net/kgjac/10/

即，通过设置position option中指定的.menu() documentation。

亲自体验+2部分：您可以通过更改此数字或将其保留（以及+）完全调整位置。

Answer 2

您可以传递一些选项，您的子菜单应该出现在这些选项中。像这样：

$( "#menu-bar" ).menu({ position: { my: "left top", at: "left bottom" } });

有关此主题的更多信息：http://api.jqueryui.com/menu/#option-position

Answer 3

我建议使用superfish菜单。 http://users.tpg.com.au/j_birch/plugins/superfish/#a

Answer 4

$( "#menu-bar" ).menu({position: {my: "left top", at: "left bottom"}});

或将位置调整到您想要的位置。