JQuery UI: Horizontal Menu

Question

我想知道如何将 JQuery UI 菜单的布局从垂直更改为水平。

我试过这个，但它只对菜单栏上的主链接有效，对子菜单上的链接无效。

我的意思是'Delphi'下的项目保持水平显示而不是垂直下降，因为这些是Delphi的子项目：

<style>   
    .ui-menu:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    } 

    .ui-menu .ui-menu-item {
        display: inline-block;
        float: left;
        margin: 0;
        padding: 0;
        width: auto;
    }
</style>

                <nav>
                    <ul id="ui-menu" class="ui-menu">
                        <li><a href="#">Link one</a></li>
                        <li><a href="#">Link two</a></li>
                        <li><a href="#">Link three</a></li>
                        <li><a href="#">Link four</a></li>
                        <li>
                            <a href="#">Delphi</a>
                            <ul>
                                <li><a href="#">Ada</a></li>
                                <li><a href="#">Saarland</a></li>
                                <li><a href="#">Salzburg</a></li>
                            </ul>
                        </li>

                    </ul>
                </nav>


    $(function () {
        $("#ui-menu").menu();
    });

编辑

这是我到目前为止所取得的成就的截图，以及还需要做的事情：

请让我知道我做错了什么。

非常感谢。

Answer 1

工作示例http://jsfiddle.net/5a75Z/1/

.ui-menu li {
    float: left;
    padding: 0 6px;
    list-style: none;
}

我删除了你所有的 css 样式，然后只添加了上面的 3 种样式，现在它只使用 float: left 水平工作，我只是添加了填充和列表样式只是因为。

编辑：

然后要让子菜单垂直显示，只需添加这个

ul ul {
    width: 100px;
    position: relative;
    left: -50px;
}

http://jsfiddle.net/5a75Z/2/

相应调整

---

编辑：

横向是这样的__ __ __
纵向是这样的
|
|
|

垂直http://jsfiddle.net/5a75Z/3/的工作示例

ul ul { 
    position: relative;
    width: 300px;
    padding-left: 50px;
}

li { list-style: none; }

ul ul li {
    float: left;
    padding: 0 5px;
    list-style: none;
    position: relative;
    top: -20px;
}

Answer 2

我找到了这个可以解决问题的 CSS NAV 生成器（有点..）：

http://cssmenumaker.com/builder/1444006