JQuery UI：水平菜單

Question

我想知道如何將JQuery UI菜單的佈局從垂直改爲水平。

我已經嘗試過，但它只適用於菜單欄上的主要鏈接，但不適用於子菜單上的主鏈接。

我的意思是在'德爾福的不斷上水平顯示，而不是垂直落下，因爲這些項目都是德爾福的子項：

<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

我發現這個CSS NAV發生器，它可以解決這個問題（那種..）：

http://cssmenumaker.com/builder/1444006

Answer 2

工作實例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; 
}