How to make dropdown menu to open dropup?

Question

How can I make my dropdown menu to a drop-up menu, so it shows like Windows start button?

The menu should be in the lower left corner.
The menu should open if you click on the button.
While it should open upwards.
It should look and work in the end, like the Windows 7 start menu.

Here is my code:

 var MainMenu = function() { var activated = false; var settings = { disabledClass: 'disabled', submenuClass: 'submenu' } var mask = '<div id="menu-top-mask" style="height: 2px; background-color: #fff; z-index:1001;"/>'; var timeOut; this.init = function(p) { $.extend(settings, p); $mask = $('#menu-top-mask'); $('ul.main-menu > li').click(function(event) { var target = $(event.target); if (target.hasClass(settings.disabledClass) || target.parents().hasClass(settings.disabledClass) || target.hasClass(settings.submenuClass)) { return; } toggleMenuItem($(this)); }); $('ul.main-menu > li > ul li').click(function(event) { // Prevent click event to propagate to parent elements event.stopPropagation(); // Prevent any operations if item is disabled if ($(this).hasClass(settings.disabledClass)) { return; } // If item is active, check if there are submenus (ul elements inside current li) if ($(this).has("ul").length > 0) { // Automatically toggle submenu, if any toggleSubMenu($(this)); } else { // If there are no submenus, close main menu. closeMainMenu(); } }); $('ul.main-menu > li').mouseenter(function() { if (activated && $(this).hasClass('active-menu') == false) { toggleMenuItem($(this)); } }); $('ul.main-menu > li > ul li').mouseenter(function(e) { // Hide all other opened submenus in same level of this item $el = $(e.target); if ($el.hasClass('separator')) return; clearTimeout(timeOut); var parent = $el.closest('ul'); parent.find('ul.active-sub-menu').each(function() { if ($(this) != $el) $(this).removeClass('active-sub-menu').hide(); }); // Show submenu of selected item if ($el.children().size() > 0) { timeOut = setTimeout(function() { toggleSubMenu($el) }, 500); } }); $('ul.main-menu > li > ul li').each(function() { if ($(this).children('ul').size() > 0) { $(this).addClass(settings.submenuClass); } }); $('ul.main-menu li.' + settings.disabledClass).bind('click', function(e) { e.preventDefault(); }); //#region - Toggle Main Menu Item - toggleMenuItem = function(el) { // Hide all open submenus $('.active-sub-menu').removeClass('active-sub-menu').hide(); $('#menu-top-mask').remove(); var submenu = el.find("ul:first"); var top = parseInt(el.css('padding-bottom').replace("px", ""), 10) + parseInt(el.css('padding-top').replace("px", ""), 10) + el.position().top + el.height(); submenu.prepend($(mask)); var $mask = $('#menu-top-mask'); var maskWidth = el.width() + parseInt(el.css('padding-left').replace("px", ""), 10) + parseInt(el.css('padding-right').replace("px", ""), 10); $mask.css({ position: 'absolute', top: '-1px', width: (maskWidth) + 'px' }); submenu.css({ position: 'absolute', top: top + 'px', left: el.offset().left + 'px', zIndex: 100 }); submenu.stop().toggle(); activated = submenu.is(":hidden") == false; !activated ? el.removeClass('active-menu') : el.addClass('active-menu'); if (activated) { $('.active-menu').each(function() { if ($(this).offset().left != el.offset().left) { $(this).removeClass('active-menu'); $(this).find("ul:first").hide(); } }); } } //#endregion //#region - Toggle Sub Menu Item - toggleSubMenu = function(el) { if (el.hasClass(settings.disabledClass)) { return; } var submenu = el.find("ul:first"); var paddingLeft = parseInt(el.css('padding-right').replace('px', ''), 10); var borderTop = parseInt(el.css('border-top-width').replace("px", ""), 10); borderTop = !isNaN(borderTop) ? borderTop : 1; var top = el.position().top - borderTop; submenu.css({ position: 'absolute', top: top + 'px', left: el.width() + paddingLeft + 'px', zIndex: 1000 }); submenu.addClass('active-sub-menu'); submenu.show(); //el.mouseleave(function () { // submenu.hide(); //}); } //#endregion closeMainMenu = function() { activated = false; $('.active-menu').find("ul:first").hide(); $('.active-menu').removeClass('active-menu'); $('.active-sub-menu').hide(); }; $(document).keyup(function(e) { if (e.keyCode == 27) { closeMainMenu(); } }); $(document).bind('click', function(event) { var target = $(event.target); if (!target.hasClass('active-menu') && !target.parents().hasClass('active-menu')) { closeMainMenu(); } }); } } $(document).ready(function() { new MainMenu().init(); }); 

 body { padding: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; } .main-menu { position: absolute; /*position: relative;*/ display: inline-block; z-index: 9999; bottom: 0px; } #menu-bar { bottom: 100%; } ul.main-menu { list-style-type: none; margin: 0px 0px 10px 0px; padding: 0px; } ul.main-menu>li { margin: 0; display: inline; list-style-type: none; padding: 6px 4px 6px 6px; line-height: 28px; vertical-align: middle; cursor: default; outline: none; border-style: solid; border-width: 1px 1px 0 1px; border-color: transparent; } ul.main-menu>li.active-menu { background-color: #fff; border-color: #ccc; -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); } ul.main-menu ul li a { color: #000; text-decoration: none; display: block; white-space: nowrap; } ul.main-menu li ul li a span { font-size: 11px; color: #999; float: right; right: 10px; left: auto; position: absolute; } /* SUBMENU */ ul.main-menu>li ul { list-style-type: none; padding: 0; margin: 0; display: none; border-width: 1px; border-style: solid; border-color: #ccc; background-color: #fff; -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); } ul.main-menu li ul li { display: list-item; margin: 0; line-height: 26px; padding-right: 40px; min-width: 100px; cursor: pointer; text-indent: 30px; white-space: nowrap; } ul.main-menu li:hover { background-color: whiteSmoke; /*#fef7cb;*/ } ul.main-menu li.active-menu:hover { background-color: #fff; } ul.main-menu li ul li.disabled, ul.main-menu li ul li.disabled:hover, ul.main-menu li ul li.disabled a { color: #ddd; cursor: default; background-color: #fff; } ul.main-menu li.separator { border-top: 1px solid #ddd; margin-top: 5px; margin-bottom: 5px; } .submenu { background-image: url(../images/menu-right-arrow.png); background-repeat: no-repeat; background-position: right center; } /* ICONS ********************************************/ .icon { background-image: url(../images/icons/icons-sprite.png); background-repeat: no-repeat; } /*.new-product { background-position: left -52px; } .new-document { background-position: left -2px; } .new-client { background-position: left -26px; }*/ .print { background-position: left -369px; } .save { background-position: left -444px; } 

 <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="../js/jquery.menu.js"></script> <link href="../css/menu.css" rel="stylesheet" type="text/css" /> <div id="menu-bar"> <ul class="main-menu"> <li> Menu <ul> <li>Documents <ul> <li>All</li> <li class="separator"></li> <li>Unfinished</li> <li>Closed</li> </ul> </li> <li><a href="/#!/products">Products</a></li> <li class="separator"></li> <li> First level <ul> <li> Second level <ul> <li> Third level menu item </li> <li> Third level <ul> <li> Forth level menu item 1 </li> <li> Forth level menu item 2 </li> </ul> </li> <li class="separator"></li> <li>Another third level menu item</li> </ul> </li> <li> Items will make menus stretch as needed </li> <li class="separator"></li> <li> Another menu item </li> </ul> </li> <li class="separator"></li> <li>Reports <ul> <li>Sell history</li> <li>Clients history</li> </ul> </li> </ul> </li> </ul> <!-- end mainmenu --> </div> 

Answer 1

just need to change the top property to bottom .

in your case:

submenu.css({
    position: 'absolute',
    bottom: top + 'px',
    left: el.offset().left + 'px',
    zIndex: 100
});

the rest should works fine