CSS multi-level dropdown menu with additional jQuery

nfdwvagbwm

New Member
I have a vertical CSS3 multilevel drop-down menu, (originally bought from here - http://codecanyon.net/item/vertical-css3-mega-menu/3206040), which I have adapted to work perfectly as a css only multi-level drop-down menu.I have added some jQuery to make the ul elements stay open when hovering, (until the screen is clicked), but can only get the first two levels to work properly. Hopefully you'll see what I mean by seeing the jsfiddle here - http://jsfiddle.net/PSFk7/5/ How would I make it so that all the levels work the same as the first two? (Similar to http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html or http://www.codenothing.com/archives/2009/multi-level-drop-down-menu/ ). HTMl code is below:\[code\] <div class="megamenu_container"> <ul class="megamenu megamenu_slide"> <li class="top_level"><span><a href="http://stackoverflow.com/questions/15883954/#">Main Page</a></span> <ul class="megamenu_main"> <li><a href="http://stackoverflow.com/questions/15883954/#">Suspendisse</a></li> <li><a href="http://stackoverflow.com/questions/15883954/#">Fusce porta</a></li> <li class="parent"><a href="http://www.mysite.co.uk/mainpage/page-01">Page Level 01</a> <ul class='children'> <li><a href="http://stackoverflow.com/questions/15883954/#">Donec et enim</a></li> <li><a href="http://stackoverflow.com/questions/15883954/#">Aliquam volutpat</a></li> <li class="parent"><a href="http://stackoverflow.com/questions/15883954/#">Page Level 02</a> <ul class='children'> <li class="parent"><a href="http://stackoverflow.com/questions/15883954/#">Page Level 03</a> <ul class='children'> <li><a href="http://stackoverflow.com/questions/15883954/#">Page Level 04</a></li> <li><a href="http://stackoverflow.com/questions/15883954/#">Proin sed nisi a sapien</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15883954/#">Curabitur ultricies</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15883954/#">Nunc sit amet</a></li> <li class="parent"><a href="http://stackoverflow.com/questions/15883954/#">In aliquam orci</a> <ul class='children'> <li class="parent"><a href="http://stackoverflow.com/questions/15883954/#">Page Level 03 V2</a> <ul class='children'> <li><a href="http://stackoverflow.com/questions/15883954/#">Page Level 04 V2</a></li> <li><a href="http://stackoverflow.com/questions/15883954/#">Proin sed nisi a sapien V2</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15883954/#">Curabitur ultricies</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15883954/#">Integer dignissim</a></li> <li><a href="http://stackoverflow.com/questions/15883954/#">Praesent euismod tortor</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15883954/#">Vestibulum quis velit</a></li> <li><a href="http://stackoverflow.com/questions/15883954/#">Aliquam lacinia</a></li> <li class="parent"><a href="http://stackoverflow.com/questions/15883954/#">Ut porttitor ipsum</a> <ul class='children'> <li class="parent"><a href="http://stackoverflow.com/questions/15883954/#">Page Level 01 V1</a> <ul class='children'> <li><a href="http://stackoverflow.com/questions/15883954/#">Page Level 02 V1</a></li> <li><a href="http://stackoverflow.com/questions/15883954/#">Proin sed nisi a sapien V1</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15883954/#">Curabitur ultricies</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15883954/#">Mauris sit amet</a></li> <li><a href="http://stackoverflow.com/questions/15883954/#">Praesent</a></li> <li><a href="http://stackoverflow.com/questions/15883954/#">Nullam ornare</a></li> </ul> </li> </ul> </div>\[/code\]CSS code:\[code\] .megamenu_container { height:55px; line-height:55px; margin:0; position:relative; float:left; z-index:9; background:#d55c4b; margin:0 17px 0 0; padding:0 39px; text-align:left; } .megamenu_container a { text-decoration: none; } .megamenu_main { list-style:none; padding:0; margin:0; } .megamenu li.top_level { list-style:none; background:none; } .megamenu .top_level > span { color:#FFF; line-height:55px; outline:0; text-decoration:none; } .megamenu .top_level > span a { color:#FFF; } .megamenu_main, .megamenu_main ul { position:absolute; top:-9999em; left:-9999em; width:167px; margin:0 0 40px -1px; padding:0; -webkit-box-shadow: 0 2px 5px #bbb; -moz-box-shadow: 0 2px 5px #bbb; -o-box-shadow: 0 2px 5px #bbb; box-shadow: 0 2px 5px #bbb; border:none; border-top:5px solid #d04734; background:#FFF; display:none; } .megamenu > li:hover .megamenu_main { top:55px; left:1px; display:block; } .megamenu > li .megamenu_main_over { top:55px; left:1px; display: block; } .megamenu_main li:hover > ul { top:-5px; left:100%; display:block; } .megamenu_main ul.children_over, .megamenu_main li.addmenu ul.children { top:-5px; left:100%; display:block; } .megamenu_main li:hover > .left_dropdown { left:-100%; } .megamenu_slide { top:30px; -webkit-transition: top 0.3s 0.2s, opacity 0 0.2s; -moz-transition: top 0.3s 0.2s, opacity 0 0.2s; -o-transition: top 0.3s 0.2s, opacity 0 0.2s; -ms-transition: top 0.3s 0.2s, opacity 0 0.2s; transition: top 0.3s 0.2s, opacity 0 0.2s; } .megamenu_slide ul { left:80%; -webkit-transition: left 0.2s 0.2s, opacity 0 0.2s; -moz-transition: left 0.2s 0.2s, opacity 0 0.2s; -o-transition: left 0.2s 0.2s, opacity 0 0.2s; -ms-transition: left 0.2s 0.2s, opacity 0 0.2s; transition: left 0.2s 0.2s, opacity 0 0.2s; } .megamenu_slide li > .left_dropdown { left:-80%; } .parent, .megamenu_main .dropdown_arrow { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); background-repeat: no-repeat; background-position: 96% 48%; } .parent:hover, .megamenu_main .dropdown_arrow:hover { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); } .megamenu_main li a { text-decoration: none; color:#4d4d4d; font-size:12px; } .megamenu_main li { border-bottom:1px solid #e5e5e5; line-height:0.8em; margin:0; padding:9px 27px 9px 13px; } .megamenu_main li a:hover { color:#d04734; } .megamenu_main > li a { font-weight:bold; } .megamenu_main > li ul { list-style: none; padding:0; margin:0; min-height:408px; } .megamenu_main > li ul li a { font-weight:normal; } .main_opened li, .megamenu_main > li ul li { position:static; -webkit-transition: background-color 0.3S; -moz-transition: background-color 0.3s; -o-transition: background-color 0.3s; -ms-transition: background-color 0.3s; transition: background-color 0.3s; }\[/code\]jQuery code:\[code\]$('.top_level').mouseover(function(){ $('.megamenu_main').addClass('megamenu_main_over'); $('html').click(function() { $('.megamenu li.top_level ul').removeClass('megamenu_main_over'); });}); $('li.parent').mouseover(function(){ $('li.parent ul').removeClass('children_over') $(this).children('ul').addClass('children_over'); $('html').click(function() { $('ul').removeClass('children_over'); });}); \[/code\]
 
Top