I have long drop down list of subcategory which also includes third level subcategory. i have added using css tricks reference: https://css-tricks.com/long-dropdowns-solution/ now im unable to display third level category... it has to display side of subcategory. provide me proper guidelines
for third level
<script> var maxHeight = 300; var maxwidth jQuery.noConflict(); jQuery(function(){ jQuery("li.level0").hover(function() { var jQuerycontainer = jQuery(this), jQuerylist = jQuerycontainer.find("ul.level0"), jQueryanchor = jQuerycontainer.find("a"), height = jQuerylist.height() * 1.1, // make sure there is enough room at the bottom multiplier = height / maxHeight; // needs to move faster if list is taller // need to save height here so it can revert on mouseout jQuerycontainer.data("origHeight", jQuerycontainer.height()); // so it can retain it's rollover color all the while the dropdown is open jQueryanchor.addClass("hover"); // make sure dropdown appears directly below parent list item jQuerylist .show() .css({ paddingTop: jQuerycontainer.data("origHeight"), position:'absolute', }); // don't do any animation if list shorter than max if (multiplier > 1) { jQuerycontainer .css({ height: maxHeight, overflow: "hidden", }) .mousemove(function(e) { var offset = jQuerycontainer.offset(); var relativeY = ((e.pageY - offset.top) * multiplier) - (jQuerycontainer.data("origHeight") * multiplier); if (relativeY > jQuerycontainer.data("origHeight")) { jQuerylist.css("top", -relativeY +jQuerycontainer.data("origHeight")); }; }); } }, function() { var jQueryel = jQuery(this); // put things back to normal jQueryel .height(jQuery(this).data("origHeight")) .find("ul") .css({ }) .hide() .end() .find("a") .removeClass("hover"); })}); jQuery (function() { jQuery("li.level1").hover(function() { var jQuerycontainer = jQuery(this), jQuerylist = jQuerycontainer.find("ul.level1"), jQueryanchor = jQuerycontainer.find("a"), height = jQuerylist.height() * 1.1, // make sure there is enough room at the bottom multiplier = height / maxHeight; // needs to move faster if list is taller // need to save height here so it can revert on mouseout jQuerycontainer.data("origHeight", jQuerycontainer.height()); // so it can retain it's rollover color all the while the dropdown is open jQueryanchor.addClass("hover"); // make sure dropdown appears directly below parent list item jQuerylist .show() .css({ //paddingTop: jQuerycontainer.data("origHeight"), position:'relative', clear:'both', }); // don't do any animation if list shorter than max }, function() { var jQueryel = jQuery(this); // put things back to normal // jQueryel // .height(jQuery(this).data("origHeight")) // .find("ul") // .css({ }) // .hide() // .end() // .find("a") // .removeClass("hover"); })}); //Add down arrow only to menu items with submenus // jQuery(".nav-primary > li:has('ul')").each(function() { // jQuery(this).find("a:first").append("<img src='images/down-arrow.png' />"); // }); </script> <style type="text/css"> ol.dropdown { position: absolute; width: 100%; height: 60px; } ol.dropdown li { background: none repeat scroll 0 0 #ccc; float: left; font-weight: bold; position: relative; width: 180px; } ol.dropdown a:hover { color: #000; } ol.dropdown li a { color: #222; display: block; padding: 20px 8px; position: relative; z-index: 904; } ol.dropdown li a:hover, ol.dropdown li a.hover { background: none repeat scroll 0 0 #f3d673; position: relative; } ol.dropdown ul { display: none; left: 0; position: absolute; top: 0; width: 100px; z-index: 902; } ol.dropdown ul li { background: none repeat scroll 0 0 #f6f6f6; border-bottom: 1px solid #ccc; color: #000; font-weight: normal; } ol.dropdown ul li a { background: none repeat scroll 0 0 #eee !important; display: block; } ol.dropdown ul li a:hover { background: none repeat scroll 0 0 #f3d673 !important; display: block; } ol.dropdown ul li ul { display: none; left: 10px; background-color: #ffc; /*right: 0;*/ width: 160px; z-index: 903; } ol.dropdown ul li ul li { background: none repeat scroll 0 0 #f6f6f6; border-bottom: 1px solid #ffc; color: #000; font-weight: normal; } ol.dropdown ul li ul li a { background: none repeat scroll 0 0 #eee !important; display: block; } ol.dropdown ul li ul li a:hover { background: none repeat scroll 0 0 #f3d673 !important; display: block; } </style> 
