Making DropDown menu 'DropUp'

问题:

I am trying to implement a drop up menu. As a starting point I am using an existing drop down menu built using HTML/CSS/jQuery based on CSS trick's Simple jQuery Dropdowns. (As I couldn't get a pure css one to work on touch devices as they relied on hover states.)

I have made a little bit of progress fiddling with ul.dropdown ul {top: -100%; } but this only moves the dropdown up one 'row', I am not convinced that's semantic css.

Any ideas how I could achieve this ?

I have made a jsfiddle of the problem here - http://jsfiddle.net/TTTb6/

回答1:

Try changing this:

ul.dropdown ul {
    bottom: 100%;
}

Updted jsfiddle

回答2:

Instead of top, use bottom: 100%;:

ul.dropdown ul {
    position: absolute;
    bottom: 100%;
}

回答3:

For touch devices you need to write code in click event. please check this one here you will get your answer...

Click to close jQuery dropdown menu on mobile devices while retaining other behavior