2子菜單的列布局

Question

我正在嘗試創建一種Jquery Ui megamenu的，甚至是稚魚風格。但不能在我的代碼中將它們用作插件。

我在我的子菜單中有2列布局。如何調整現有代碼以在2列布局中顯示它？ Here's my jsfiddle。

就我的理解，我將不得不在這方面用css玩很多。正如我試圖通過在主列表中有2個無序列表一樣，並且連續向右和向左浮動並使用兩個清除。

正如您可以發現一列已經存在，另一列將通過ajax調用動態更新。

任何幫助，將不勝感激。

Answer 1

這裏有一個簡單的演示：

http://jsfiddle.net/brvX3/11/

HTML：

<ul> 
    <li><a href="">Menu item</a> 
     <div style="display:none"> 
      <ul> 
       <li><a href="">Menu2 item1</a></li> 
       <li><a href="">Menu2 item1</a></li> 
      </ul> 
      <ul> 
       <li><a href="">Menu2 item2</a></li> 
       <li><a href="">Menu2 item2</a></li> 
      </ul> 
     </div>  
    </li> 
    <li><a href="">Menu item</a></li> 
    <li><a href="">Menu item</a></li> 
</ul> 

CSS：

body { 
     font-family:arial; 
     font-size:10px; 
    } 

    ul, li { 
     margin:0; 
     passing:0 
    } 

    ul > li { 
     float:left; 
     position:relative; 
    } 

    ul li a { 
     display:block; 
     padding:3px; 
     width:80px; 
     background-color:#e0e0e0   
    } 

    ul div { 
     position:absolute; 
     width:180px; 
     background-color:#e0e0e0 
    } 

    ul ul { 
     float:left; 
     width:90px 
    } 


ul li a:hover > div { 
    display:block;  
} 

JS：

$("ul a").hover(
    function(){ $(this).next().show() }, 
    function() { $(this).next().hide() } 
); 
$("ul div").hover(
    function(){ $(this).show() }, 
    function() { $(this).hide() } 
)