Jquery ui jqueryui：水平菜单

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

我试过这个，但它只适用于菜单栏上的主链接，而不适用于子菜单上的链接

我的意思是“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();
    });

.ui菜单：之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
} 
.ui菜单.ui菜单项{
显示：内联块；
浮动：左；
保证金：0；
填充：0；
宽度：自动；
}













$（函数（）{
$（“#ui菜单”）.menu（）；
});

编辑

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

请让我知道我做错了什么

非常感谢

工作示例

我删除了所有的css样式，然后添加了上面的3种样式，现在只使用

float:left

，我添加了填充和列表样式就是因为

编辑：

然后要使子菜单垂直显示，只需添加以下内容

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

相应调整

---

编辑：

水平方向是这样的 垂直方向是这样的
|
|
|

垂直方向的工作示例

---

我发现这个CSS导航生成器可以解决这个问题（有点…）：

---

这使所有东西再次垂直。我想要的是一个水平菜单栏，水平菜单栏（Delphi）上有一个项目垂直显示它的项目：（Ada、Saarland和Salzburg）。还有其他想法吗？谢谢你的帮助，我已经编辑了这个问题，并添加了一个我希望如何显示的屏幕截图。它有点半工作；除了hoovering Delphi时，它的项目水平显示（彼此相邻），而不是垂直显示（彼此重叠）。Delphi应该生成一个下拉列表，目前为止，上面的工作还没有完成。谢谢

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

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