Horizontal Jquery UI Menu

Horizontal Jquery UI Menu with 3rd level ... Initially you have to clicked on any menu item then only hover will initialize

by Rob Sedgwick

HTML

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

            <ul class="sub-menu">
                <li><a href="#">Item 3-1</a>

                    <ul class="sub-menu">
                        <li><a href="#">Item 3-11</a>
                        </li>
                        <li><a href="#">Item 3-12</a>

                            <ul>
                                <li><a href="#">Item 3-111</a>
                                </li>
                                <li><a href="#">Item 3-112</a>

                                    <ul>
                                        <li><a href="#">Item 3-1111</a>
                                        </li>
                                        <li><a href="#">Item 3-1112</a>
                                        </li>
                                        <li><a href="#">Item 3-1113</a>

                                            <ul>
                                                <li><a href="#">Item 3-11131</a>
                                                </li>
                                                <li><a href="#">Item 3-11132</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#">Item 3-113</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Item 3-13</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Item 3-2</a>

                    <ul>
                        <li><a href="#."> Item 3-21 </a>
                        </li>
             ...

CSS

.ui-menu2 {
 /*    overflow: hidden; */
}
.ui-menu2 .ui-menu {
/*     overflow: visible !important; */
}
.ui-menu2 > li {
   /*  float: left;
   display: block;
    width: auto !important; */
}
.ui-menu2 ul li {
  /*   display:block;
    float:none; */
}
.ui-menu ul li ul {
   /*  left:120px !important;
    width:100%; */
}
.ui-menu2 ul li ul li {
    /* width:auto; */
}
.ui-menu2 ul li ul li a {
  /*   float:left; */
}
.ui-menu2 > li {
   /*  margin: 5px 5px !important;
    padding: 0 0 !important; */
}
.ui-menu2 > li > a {
  /*   float: left;
    display: block;
    clear: both;
    overflow: hidden; */
}
.ui-menu2 .ui-menu-icon {
/*     margin-top: 0.3em !important; */
}
.ui-menu .ui-menu .ui-menu li {
 /*    float: left;
    display: block; */
}
.testnav li a:hover {
 /*    background-color:#ccc; */
}
#navigator {
   /*  position:relative; */
}
#nav {
  /*   overflow : hidden; */
}
#nav > li {
  /*   float : left; */
    /*width : 100px !important;*/
}
#nav .ui-menu {
  /*   width : 114px; */
}

.menuxx {
  /*   border-top: 1px #568AB2 solid;
    border-bottom: 1px #568AB2 solid; */
}

JavaScript

$(document).ready(function () {

    $(".testnav").addClass("ui-menu ui-widget ui-widget-content ui-corner-all");
    $(".testnav li").addClass("ui-menu-item");
    $(".sub-menu").hide();


    $(".clk2").click(function () {

        var menu = "#nav";
        var position = {
            my: "left top",
            at: "left bottom+8"
        };
        $(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: "left top"
                    });
                }
            }
        });



    });

}); // End of document function