如何強制jQuery UI菜單或類似的水平顯示第二個子菜單項

Question

菜單有3個級別。第一級只有一個名爲「全部顯示」的項目。 第二級包含產品類別。 第三級包含子類別。 沒有更多的菜單級別。

小類必須水平顯示：

Show all 
+-----------+ 
|Category1 |+-----------------------------------------------------------+ 
|Category2 >|| Subcategory21 Subcategory24 Subcategory27 Subcategory2A| 
|Category3 || Subcategory22 Subcategory25 Subcategory28 Subcategory2B| 
+-----------+| Subcategory23 Subcategory26 Subcategory28    | 
      +-----------------------------------------------------------+ 

我試過jQuery UI的菜單菜單窗口小部件來實現這一點。 子類別垂直顯示。如何改變這個以便子類別水平顯示？

jquery ui是否可以爲此修補或者是否存在允許這樣做的其他控件。 子菜單必須在鼠標懸停時打開。 jquery-ui菜單允許使用鼠標懸停打開，但我還沒有找到一種方法來呈現第三級水平。

在運行時從數據庫中讀取數據。 jquery的，jQuery的用戶界面，ASP.NET/Mono MVC2用於

更新

演示是在http://jsfiddle.net/cNgG5/

<ul id="menu" style="width:110px"> 
    <li><a href="#">Category</a> 

     <ul> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
      <li><a href="#">Submenu</a> 
      </li> 
     </ul> 
    </li> 
<script>  
$(function() { 
    $("#menu").menu(); 
}); 
</script>  

移動光標到類別和單個列菜單出現。如何將其呈現給多個列？

Answer 1

在jQuery的UI的1.10.1.custom.ss

（或任何相當於你使用其下）把這個：

.ui-menu { 
    width: 30em; /* or whatever width you want it to be */ 
} 

和

.ui-menu-item { 
    display: inline-block; 
    width: 100% /* TAKE THIS OUT! */ 
} 

更新：使用immediate child選擇：

對不起..我沒有做足夠的測試..做到這一點，而不是http://jsfiddle.net/cNgG5/7/

/* this only applies to the first level submenu.. the 30em can be replaced with whatever width 
    you want the menu to appear in */ 
#menu>.ui-menu-item .ui-menu { 
    width: 30em; 
} 
/* this only applies to the items in the first level submenu.. for them to 
stack up next to each other, we want to override the width: 100% given in 
.ui-menu .ui-menu-item, without affecting the first level menu 
(that was the problem with my previous answer) */ 
#menu>.ui-menu-item .ui-menu .ui-menu-item { 
    display: inline-block; 
    width: auto; 
} 

招（內碼提供的說明）。

注：如果您的最終解決方案具有子菜單的一個以上的水平（即menue-> submenu->子菜單等）..那麼你可以重複上述過程。這只是將上述樣式應用於正確的層次。

Answer 2

您可以使用CSS。例如給所有的子類別一個類並設置float：left。當然，我需要更多信息來幫助你更好。如果你可以用jsfiddle上傳你的代碼，那會更好。

好吧，我在這裏交付簡單，因爲我可以爲您的組水平菜單的現場演示。你應該爲每個組包含1個li併爲每個實時輸入div，並且只有css的幫助，你可以做你想做的事情。

jQuery UI horizontal grouped menu

<ul id="menu" style="width:110px"> 
    <li><a href="#">Category</a> 

     <ul> 
      <li> 
       <div><a href="">submenu</a></div> 
       <div><a href="">submenu</a></div> 
       <div><a href="">submenu</a></div> 
      </li> 
      <li> 
       <div><a href="">submenu</a></div> 
       <div><a href="">submenu</a></div> 
      </li> 
      <li> 
       <div><a href="">submenu</a></div> 
       <div><a href="">submenu</a></div> 
       <div><a href="">submenu</a></div> 
       <div><a href="">submenu</a></div> 
      </li> 
     </ul> 
    </li> 
</ul> 

而CSS會是這樣：

#menu{width:400px;float:left;} 
#menu li ul li{ 
    width:100px; 
    float:left; 
    word-wrap: break-word; 
} 
#menu li ul li div{ 
    width:100px; 
    float:left; 
}