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

Question

I've created a dropdown menu with pure CSS and I've gotten it to a place that I like except I want it to be "drop-up" not "drop-down" since the menu bar is going at the bottom of the layout. What I need to add or change to make it "drop-up"?

Answer 1

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
}