How to force jquery ui menu or similar to show second submenu items horizontally

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:

Show all
+-----------+
|Category1  |+-----------------------------------------------------------+
|Category2 >|| Subcategory21  Subcategory24  Subcategory27  Subcategory2A|
|Category3  || Subcategory22  Subcategory25  Subcategory28  Subcategory2B|
+-----------+| Subcategory23  Subcategory26  Subcategory28               |
             +-----------------------------------------------------------+

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

Update

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 ?

in jquery-ui-1.10.1.custom.ss (or whatever equivalent you're using under it) put this:

.ui-menu {
    width: 30em; /* or whatever width you want it to be */
}

and

.ui-menu-item {
    display: inline-block;
    width: 100% /* TAKE THIS OUT! */
}

update:

sorry.. i didn't do enough testing.. do this instead (explanation provided within code) http://jsfiddle.net/cNgG5/7/

/* this only applies to the first level submenu.. the 30em can be replaced with whatever width 
   you want the menu to appear in */
#menu>.ui-menu-item .ui-menu {
    width: 30em;
}
/* this only applies to the items in the first level submenu.. for them to 
stack up next to each other, we want to override the width: 100% given in 
.ui-menu .ui-menu-item, without affecting the first level menu
(that was the problem with my previous answer) */
#menu>.ui-menu-item .ui-menu .ui-menu-item {
    display: inline-block;  
    width: auto;
}

trick: using immediate child selectors.

note: if your final solution has more than one level of submenu (ie menue->submenu->submenu etc).. then you can just repeat the above process.. it's just a matter of applying the above styles to the right levels.