2 column layout for submenus

I am trying to create sort of Jquery Ui megamenu's or even suckerfish style. But can not use them as a plugin in my code.

I have a 2 column layout in my sub menus. How 开发者_StackOverflowdo I tweak the existing code to show it in a 2 column layout? Here's my jsfiddle.

To my understanding, i will have to play a lot with css in this. As I tried doing it by having 2 Unordered list in the main list and gave float right and left consecutively and used clear both.

As you can find that one column already exists.the other column would be dynamically updated through ajax call.

Any help would be appreciated.

Here's a simple demo:

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() }
)