How to make jQuery UI nav menu horizontal?

Question

I love the jQuery UI stuff!

I like the navigation menu, but I can\'t seem to get it horizontal. I\'ve got to be missing something that\'s a cinch.

Anyone kno

Answer 1

I know this is an old thread but I was digging into the jQuery UI source code and built upon Rowan's answer which was closer to what I had been looking for. Only I needed the carrots as I felt it was important to have a visual indicator of possible submenus. From looking at the source code (both .js and .css) I came up with this that allows the carrot be visiable without messing with design (height) and also alowing menu to appear vertical below the parent item.

In the jquery-ui.js do a search to find $.widget( "ui.menu") and change postition to:

position: {
my: "center top",
at: "center bottom"
}

And in your css add:

#nav > .ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#nav > .ui-menu > .ui-menu-item {
    display: inline-block;
    float: left;

    margin: 0;
    padding: 3px;

    width: auto;
}

.ui-menu .ui-menu-item a {
    padding: 0;
}

.ui-menu .ui-menu-icon{
    position: relative;
    left: 1px;
    top: 6px;
}

End Result will be a jQuery UI Menu horizontal with sub menus being displayed veriticaly below the parent menu item.