Dropup Menus in CSS

Drop-down menu that opens up/upward with pure css

Add bottom:100% to your #menu:hover ul li:hover ul rule

Demo 1

#menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom: 100%; /* added this attribute */
}

---

Or better yet to prevent the submenus from having the same effect, just add this rule

Demo 2

#menu>ul>li:hover>ul { 
    bottom:100%;
}

---

Demo 3

source: http://jsfiddle.net/W5FWW/4/

And to get back the border you can add the following attribute

#menu>ul>li:hover>ul { 
    bottom:100%;
    border-bottom: 1px solid transparent
}

Change DropUp Menu From Hover to Click

instead of using the css :hover use javascript to add and remove .hover class to the .dropup-content element when the .dropdown-toggle element is touched/clicked.

.dropup-content {
    display: none;
    /* position: absolute; */
    background-color: #f1f1f1;
    min-width: 160px;
    bottom: 50px;
    z-index: 1;
}
.dropup-content.hover {
    display: block;
}

dropup menus in CSS?

Here is what I think is a good example:

jQuery multi-tiered drop-up menu

Watch demo here.

BTW just a warning the demo has de drop up way down in the left corner, call me an idiot but i refreshed 5 times before i saw it :)

Good luck

How to align a dropdown menu in CSS

As you set .dropup-content to absolute, it will be left aligned relative to .dropup as .dropup-content is within .dropup. But as your class is already absolute, simply add:

right: 0;
left: auto; // Unsure if you really need this though

to .dropup-content. This will take care that the class is right aligned relative to .dropup.

how to make css dropdown menu a dropup menu

You can try something like this http://jsfiddle.net/ZG2BL/

The idea is, to set the li that holds dropdown ul as position:relative; and the ul dropdown as position:absolute; and give it a positive bottom value so it'll show up above the parent li

I must say that you have a lot of unnesecary code. For example ther's no need for li elements to be wrapped in div etc. Also you cant have numerical id's.

onclick drop Up Menu

CSS animation is all you need :

CSS :

.dropdown{
  position: fixed;
  z-index: 100; // big value if needed
  top: 100vh; // hide dropdown 
  left: 0;
  transition: all 200ms ease-out; // or whatever else
}
.dropdown.active{
  transform: translate(0, -100%); // dropdown come up
}

JS:

$('.country-btn').click(()=>{
  $(".dropdown").toggleClass('active'); // dropdown switch state each time you click
});

$('#container').click(()=>{ // dropdown off when content clicked, see bellow note
  $('dropdown').removeClass('active');
});

Note : To implement the body click that close dropdown, just wrap your content in a div (here #container) then link the unactivate dropdown event.
It prevents your country-button/dropdown clicks to call dropdown off event.

Feel free to ask any question if you dont get it well !

How to make dropdown menu to open dropup?

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

---

Related Topics