javascript - 子菜单的 2 列布局

Question

我正在尝试创建某种 Jquery Ui megamenu 甚至 suckerfish 风格。但不能将它们用作我的代码中的插件。

我的子菜单中有一个 2 列布局。如何调整现有代码以在 2 列布局中显示它？ Here's my jsfiddle .

据我了解，我将不得不在这方面大量使用 CSS。正如我尝试通过在主列表中包含 2 个无序列表并连续向右和向左浮动并使用 clear 两者来做到这一点。

如您所见，一列已经存在。另一列将通过 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() }
)