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

subcategories with long dropdown

1 Answer 1

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.

var maxHeight = 100;

    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

        // make sure dropdown appears directly below parent list item    
                paddingTop: jQuerycontainer.data("origHeight")

        // don't do any animation if list shorter than max
        if (multiplier > 1) {
                    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
            .css({ top: 0 })


    // 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' />");
    // });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.