How to show drop-down menu from top to use.show()

Question

I have created a dropdown menu using cssmenumaker. Everything is working fine on the desktop, and also on mobile view. But, On mobile view, when I am clicking on the dropdown link it's showing from the left. But, I want to show/slide up from the top. I am not a jquery expert. I am using the following code-

Here is live link live link

/*================ Menu ====================*/
(function($) {

    $.fn.menumaker = function(options) {
    var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
    }, options);

    return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
                mainmenu.hide().removeClass('open');
            }
            else {
                mainmenu.show("slow").addClass('open');
                if (settings.format === "dropdown") {
                    mainmenu.find('ul').show("slow");
                }
            }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
                $(this).toggleClass('submenu-opened');
                if ($(this).siblings('ul').hasClass('open')) {
                    $(this).siblings('ul').removeClass('open').hide();
                }
                else {
                    $(this).siblings('ul').addClass('open').show("slow");
                }
            });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
            if ($( window ).width() > 767) {
                cssmenu.find('ul').show("slow");
            }

            if ($(window).width() <= 767) {
                cssmenu.find('ul').hide().removeClass('open');
            }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

    });
    };
})(jQuery);

(function($){
    $(document).ready(function(){

    $("#cssmenu").menumaker({
        title: "",
        format: "multitoggle"
    });

    });
})(jQuery);

Answer 1

Use slideDown() function rather than show() function

Answer 2

Try with slideDown(); insteat of show();