Question

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

我的子菜单中有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() }
)

子菜单的2列布局

1 个答案: