I have many subcategories to be displayed in home page, but it is vertically too long,, i want to make it scroll on hover. what changes need to be done in css or other files, please guide me script which is responsive
reference:https://css-tricks.com/examples/LongDropdowns/ i want scolling of list as in referred website mentioned above
add height and overflow scroll styke.css line 3529 .nav-primary li.level0 ul { background: none repeat scroll 0 0 #fbfbfb; border: 1px solid #cccccc; display: none; height: 50px; left: 0; overflow: scroll; padding-left: 10px; padding-right: 10px; position: absolute; top: 30px; width: 250px; z-index: 10; } this jquery function for dropdown scroll adjust it according to your classes.
<script> var maxHeight = 100; jQuery.noConflict(); jQuery(function(){ jQuery(".nav-primary > li").hover(function() { var jQuerycontainer = jQuery(this), jQuerylist = jQuerycontainer.find("ul"), 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") }); // 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({ top: 0 }) .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> 