I appreciate the creative solutions being devised to transform a menu into a menubar as I struggle with CSS editing. It often feels like delving into complex forces beyond my comprehension! Utilizing the menubar files offered at the menubar branch of jquery ui seems like a simpler approach.

I obtained the comprehensive jquery ui css bundle from the jquery ui download site

Incorporating the jquery ui css file containing all elements in the header of my document (currently using version 1.9.x) along with the specific CSS file for the menubar widget from the menubar branch of jquery ui was my process.

<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.menubar.css" rel="stylesheet" />

Remember, the images folder housing the icons used by jQuery UI must be placed in the same directory as the jquery-ui.css file.

To complete, my body section consists of:

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>
<script type="text/javascript" src="js/menubar/jquery.ui.menubar.js"></script>

This includes an updated jQuery version, followed by the jQuery UI file, and then the menubar module sourced from the menubar branch of jquery ui.

The simplicity of the menubar CSS file is refreshing:

.ui-menubar { list-style: none; margin: 0; padding-left: 0; }
.ui-menubar-item { float: left; }
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; font-weight: normal; }

However, the menubar JavaScript file spans 328 lines - too extensive to detail here. With this file, simply execute menubar() following this example:

$("#menu").menubar({
    autoExpand: true,
    menuIcon: true,
    buttons: true,
    select: select
});

Despite the commendable efforts to repurpose the menu object into a horizontal bar, many approaches lacked essential features of a standard horizontal menu bar. It remains unclear why this widget has not been integrated into jQuery UI yet, indicating potential unresolved issues. In my trials, I encountered positioning anomalies in IE 7 Quirks Mode, while achieving satisfactory results in Firefox, Safari, and IE 8+.

After coming across this post, I felt motivated to give the jQuery ui menu a shot.

http://jsfiddle.net/7Bvap/

<ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3-1</a>
            <ul>
                <li><a href="#">Item 3-11</a></li>
                <li><a href="#">Item 3-12</a></li>
                <li><a href="#">Item 3-13</a></li>
            </ul>
            </li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>


.ui-menu { 
    overflow: hidden;
}
.ui-menu .ui-menu {
    overflow: visible !important;
}
.ui-menu > li { 
    float: left;
    display: block;
    width: auto !important;
}
.ui-menu ul li {
    display:block;
    float:none;
}
.ui-menu ul li ul {
    left:120px !important;
    width:100%;
}
.ui-menu ul li ul li {
    width:auto;
}
.ui-menu ul li ul li a {
    float:left;
}
.ui-menu > li {
    margin: 5px 5px !important;
    padding: 0 0 !important;
}
.ui-menu > li > a { 
    float: left;
    display: block;
    clear: both;
    overflow: hidden;
}
.ui-menu .ui-menu-icon { 
    margin-top: 0.3em !important;
}
.ui-menu .ui-menu .ui-menu li { 
    float: left;
    display: block;
}


$( "#nav" ).menu({position: {at: "left bottom"}});

http://jsfiddle.net/vapD7/

<ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3-1</a>
            <ul>
                <li><a href="#">Item 3-11</a></li>
                <li><a href="#">Item 3-12</a></li>
                <li><a href="#">Item 3-13</a></li>
            </ul>
            </li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
.ui-menu .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}
.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }

.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
.ui-menu .ui-state-disabled a { cursor: default; }
.ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

$( "#nav" ).menu({position: {at: "left bottom"}});

After searching for 3 days, I managed to find a jquery UI and CSS solution by combining and adjusting some code snippets. Finally, with a bit of tweaking, I got it to work alongside other codes!

Check out the result here!

<ul id="nav" class="testnav">
    <li><a class="clk" href="#">Item 1</a></li>
    <li><a class="clk" href="#">Item 2</a></li>
    ...

Javascript Code:

$(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 Code:

.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;

Imagine the jquery-ui menu as a vertical dropdown that appears when you hover over an item in your main horizontal menu. Each topic on the main menu has its own separate jquery UI menu. The main horizontal menu consists of float:left divs wrapped in a mainmenu div. Using hover events, each menu is displayed when hovered over.

$('.mainmenuitem').hover(
    function(){ 
        $(this).addClass('ui-state-focus ui-corner-all ui-state-hover ui-state-active mainmenuhighlighted');
        var position=$(this).offset();
        posleft=position.left;
        postop=position.top;
        submenu=$(this).attr('submenu');
        showSubmenu(posleft,postop,submenu);    
    },
    function(){ 
        $(this).removeClass('ui-state-focus ui-corner-all ui-state-hover ui-state-active mainmenuhighlighted');
        $('.submenu').hide();
    }
    );

The showSubmenu function simply positions and displays the submenu.

function showSubmenu(left,top,submenu){
    var tPosX=left;
    var tPosY=top+28;
    $('#'+submenu).css({left:tPosX, top:tPosY,position:'absolute'});
    $('#'+submenu).show();
}

Ensure the submenu remains visible when your cursor is on it and disappears when you leave (add this to your document.ready function).

$('.submenu').hover(
            function(){ 
                $(this).show();
            },
            function(){ 
                $(this).hide();
            }
            );

Don't forget to initially hide your submenus in the document.ready function.

$(".submenu" ).hide();

View the complete code here.

Expanding on the response from Mihalis Bagos, I implemented the following solution:

<style>
.ui-menu{
   z-index: 1000;
}

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

#menubar-layout-container > .ui-menu > .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}

.ui-menu .ui-menu-icon{
   display: none;
}
</style>

This modification results in a horizontal top-level menu and vertical submenus.

I had to eliminate the icons to resolve layout issues.

Additionally, there appears to be an issue with the positioning of the submenu.

Hello everyone! I am a newcomer to stackoverflow, so I kindly ask for your patience and understanding :) As I encountered the challenge of creating a horizontal jQuery UI menu, I was able to find a solution by following the guidelines provided here:

#nav li {width: auto; clear: none; float: left}
#nav ul li {width: auto; clear: none; float:none}

Although this discussion is dated, my exploration of the jQuery UI source code led me to enhance Rowan's answer, which was similar to what I was seeking. However, I required the addition of carrots for visual cues indicating potential submenus. After examining both the .js and .css files, I devised a solution that enables the carrot to be visible without impacting the design (height) while allowing the submenu to appear vertically below the parent item.

To achieve this, search for $.widget( "ui.menu") in jquery-ui.js and modify the position properties as follows:

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

Additionally, insert the following CSS rules:

#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;
}

By implementing these modifications, you can create a jQuery UI Menu with horizontal orientation, displaying sub menus vertically beneath the parent menu item.

adjusting:

.ui-menu .ui-menu-item { 
    margin: 0; 
    padding: 0; 
    zoom: 1; 
    width: auto; 
    float:left; 
}

this tweak can kickstart your progress.

I came across an excellent solution in the form of a plugin known as jMenu.

Main website:
Demo:
GitHub repository: https://github.com/alpixel/jMenu

Here's a screenshot:

To create a horizontal navigation bar with vertical dropdowns, it is recommended to use a combination of a table and unordered lists.

The primary items are depicted by table cells, while the subsequent levels are represented by unordered lists.

One challenge encountered was the positioning of the child menus. By default, they would appear directly next to the parent item, causing overlap with other elements in the horizontal nav bar. Placing them below worked for single dropdown menus, but when there was another level beneath, it obscured the rest of the menu. The solution involves opening the menu slightly below and to the right, utilizing the "position" option in the menu invocation.

<style type="text/css">
  #trJMenu td { white-space: nowrap; width: auto; }
  #trJMenu li { white-space: nowrap; width: auto; }
</style>


<script language="javascript" type="text/javascript">
  $(document).ready(function(){
    $("#trJMenu").menu( { position: { my: "left top", at: "center bottom" } } );          
  });
</script>


<table>
  <tr id='trJMenu'>
    <td>
      <a href='#'>Timesheets</a>
      <ul>
        <li><a href='#'>Labour</a></li>
        <li><a href='#'>Chargeout Report</a></li>
      </ul>
    </td>
    <td>
      <a href='#'>Activity Management</a>
      <ul>
        <li><a href='#'>Activities</a></li>
        <li><a href='#'>Proposals</a></li>
      </ul>
    </td>
  </tr>
</table>