How to render submenu in multiple columns

How to render submenu in multiple columns

Menu has 3 levels. First level has only single item called "Show all".
Second level contains product categories.
Third level contains subcategories.
There are no more menu levels.


 
Subcategories must displayed horizontally.
I tried jquery ui menu menu widget to implement this.

Subcategory is displayed vertically. How to change this so that subcategories are displayed horizontally?

Can jquery ui patched for this or is there some other control which allows this.
Submenus must opened on mouse hover. jquery-ui menu allows to open using mouse hover but I havent found a way to render third level horizontally.

Data is read from database at runtime.
jquery, jquery ui, ASP.NET/Mono MVC2 are used

Demo is at 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>   














































 Move cursor to Category and single column menu appears. How to render it to multiple columns ?