Add another (flyout) level to navigation

[stephen_]

I'm trying to add another level to a navigation bar - alls fine except I cant change the javascript so that the 3rd level menu only shows when hovering over the 2nd level menu link

The scipt behind the 2nd level hover is;

var mylib =
{
	dropDown :
	{
		init : function()
		{
			$(".sub-nav").hide();
			$(".sub-nav li:last-child").addClass("last");
			$("#nav > li").hover(function(){
				$(this).addClass("active");
				$(".sub-nav",this).show();
			},
			function(){
				$(this).removeClass("active");
				$(".sub-nav",this).hide();
			});
			
			$("#sub-nav a").click(function () {
	            $("#sub-nav").hide();
	        });
		}
	}
}

The html is:

<ul id="nav">
   <li id="1" class="first"><href="#">level 1 menu</a>
      <ul class="sub-nav">
         <li><a href="n.htm">level 2 menu</a>
              <ul class="sub-sub-nav">
                    <li><a href="#.htm">level 3 menu</a></li>
                    <li><a href="#.htm">level 3 menu</a</li></ul>
</li>
</ul>
</li>
</ul>

[AussieJohn]

I'm trying to add another level to a navigation bar - alls fine except I cant change the javascript so that the 3rd level menu only shows when hovering over the 2nd level menu link

Any particular reason you're using JavaScript for the menu? This could be done with some simple CSS

http://jsfiddle.net/GeekyJohn/xF2vJ/

Simplified version of the fiddle - we start with pretty much the same markup as you have

<ul class="nav">
    <li id="1" class="first"><a href="#">level 1 menu</a>
        <ul class="sub-nav">
            <li>
                <a href="n.htm">level 2 menu</a>
                <ul class="sub-nav">
                    <li><a href="#.htm">level 3 menu</a></li>
                    <li><a href="#.htm">level 3 menu</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>


<ul class="nav horiz">
    <li id="1" class="first"><a href="#">level 1 menu</a>
        <ul class="sub-nav">
            <li>
                <a href="n.htm">level 2 menu</a>
                <ul class="sub-nav">
                    <li><a href="#.htm">level 3 menu</a></li>
                    <li><a href="#.htm">level 3 menu</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

The style rules are pretty simple - just some base styles for the look and feel, the important rule being:

li:hover > .sub-nav {
    display:block;
}

this will make sure that only sub menus that are an immediate child of the <li> are shown

The full styles are:

/* base styles for the menu list items and links */
.nav li { 
    width:100px;
    background:#ccc;
    position:relative;
}
 
 
.nav li a{
    display:block;
    padding:4px 10px;
    line-height:26px;
    border:2px solid #fff;
}
 
 
/* base style for a sub-nav */
.sub-nav { 
    display:none;
    position:absolute;
    left:100%;
    top:0px;
}
 
 
/* When the <li> is hovered, show it's immediate sub-nav */
li:hover > .sub-nav {
    display:block;
}
 
 
/* Variant styles for a horizontal menu */
.nav.horiz > li {
    float:left;
}
 
 
.nav.horiz > li > .sub-nav {
    left:0;
    top:38px;
}
 
 
.nav.horiz > li > .sub-nav .sub-nav{
    margin:5px 0;
}

[stephen_]

@AussieJohn - firstly I should'nt reply to you due to the rugby on Saturday : )

Basically this has already been developed and I've been tasked with updating the code. I agree a pure CSS/HTML menu is now essential - i've noticed a few lag issues with it already....

I'll take a good look at your example and apply the original CSS to it - many many thanks for helping John!