Making DropDown menu 'DropUp'

Question

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/

Answer 1

Instead of top, use bottom: 100%;:

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

Answer 2

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

Answer 3

Try changing this:

ul.dropdown ul {
    bottom: 100%;
}

Updted jsfiddle