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 just been for 3 days looking for a jquery UI and CSS solution, I merge some code I saw, fix a little, and finally (along the other codes) I could make it work!

http://jsfiddle.net/Moatilliatta/97m6ty1a/

    
Item 1
    
Item 2
    
Item 3
        

            
Item 3-1
                

                    
Item 3-11
                    
Item 3-12
                        

                            
Item 3-111
                         
                            
Item 3-112
                                

                                    
Item 3-1111
                            
                                    
Item 3-1112
                            
                                    
Item 3-1113
                                        

                                            
Item 3-11131
                           
                                            
Item 3-11132
                           
                                        
                                    
                           
                                
                            
                            
Item 3-113
                        
                    
                    
Item 3-13
                
            
            
Item 3-2
                

                    
 Item 3-21 
                    
 Item 3-22 
                    
 Item 3-23 
                
   
            
            
Item 3-3
            
Item 3-4
            
Item 3-5
        
    
    
Item 4
        

            
Item 4-1
                

                    
 Item 4-11 
                    
 Item 4-12 
                    
 Item 4-13 
                        

                            
 Item 4-131 
                            
 Item 4-132 
                            
 Item 4-133 
                        
                    
                
            
            
Item 4-2
            
Item 4-3
        
    
    
Item 5

javascript

$(document).ready(function(){

var menu = "#nav";
var position = {my: "left top", at: "left bottom"};

$(menu).menu({

    position: position,
    blur: function() {
        $(this).menu("option", "position", position);
        },
    focus: function(e, ui) {

        if ($(menu).get(0) !== $(ui).get(0).item.parent().get(0)) {
            $(this).menu("option", "position", {my: "left top", at: "right top"});
            }
    }
});     });

CSS

.ui-menu {width: auto;}.ui-menu:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}.ui-menu .ui-menu-item {display: inline-block;margin: 0;padding: 0;width: auto;}#nav{text-align: center;font-size: 12px;}#nav li {display: inline-block;}#nav li a span.ui-icon-carat-1-e {float:right;position:static;margin-top:2px;width:16px;height:16px;background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -64px -16px;}#nav li ul li {width: 120px;border-bottom: 1px solid #ccc;}#nav li ul {width: 120px; }.ui-menu .ui-menu-item li a span.ui-icon-carat-1-e {background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -32px -16px !important;