Question

JQuery UI 1.9 has a very handy function to create a menu. However this menu is a vertical menu. Has anyone used JQuery 1.9 to create a horizontal menu ?

UPDATE

I added the page

<ul id="nav">
    <li><a href="#">Item #1</a></li>
    <li><a href="#">Profile</a>
    <ul>
        <li><a href="#">Ada</a></li>
        <li><a href="#">Saarland</a></li>
        <li><a href="#">Salzburg</a></li>
    </ul>
    </li> 

</ul>

I added the following code into the css:

.ui-menu:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.ui-menu .ui-menu-item {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: auto;
}

The CSS created a horizontal menu for Item#1 and Profile. However the CSS could not make Ada, Saarland, and Salzburg as a drop down menu of Profile.

Anyone has any suggestions ?

Answer 1

Possible duplicate from How to make jQuery UI nav menu horizontal?

But you can definitely do it: it is not a jQuery issue, you just need to style the affected elements with CSS, which are the .ui-menu and .ui-menu-item classes.