Subcategories overlapping with main category when added js for long dropdown list

Question

I have added js script in my footer.phtml to display scrolling onhover for long drop down list, but alignment of the navigation bar is not proper.. I want it to display below main category with proper alignment please guide me script which is responsive

if i give position:absolute then dropdown will align properly but the categories will overlap

below is the script for hover on long dropdown

<script>
var maxHeight = 100;
var maxwidth 
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: 100 })
            .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>

Answer 1

change the topmenu.phtml add these

<nav id="nav">
        <ol class="dropdown">
            <?php echo $_menu ?>
        </ol>
    </nav>

add below in footer.phtml and see the output and also style as you required i made changes in style.

 <script>
    var maxHeight = 300;
    var maxwidth 
    jQuery.noConflict();
    jQuery(function(){

        jQuery(".dropdown > 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({  })
                .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: relative;
        width: 100%;
    }
    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: 2000;
    }
    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: 180px;
        z-index: 1000;
    }
    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;
    }

    </style>