Paul_o_b - 11:09 am on Jan 15, 2012 (gmt 0)

Hi,

At the simplest level you just use bottom:0 instead of top:0 and the menu will go upwards.

e.g.

.nav ul {
position:absolute;
left:-999em;
bottom:1.3em;/* height of top level nav - adjust to suit*/
}
.nav li:hover ul, ul.nav li.sfHover ul {
left:-10px;
}


Hide it off left to start with and then bring it back with left:-10px etc. Adjust the bottom measurement to suit your layout.

You have too many !importants in that code where nine are needed. normal specificity will take care of conflicts.

You also have an extra rule mixed in that hides everything just after you've tried to show it.

.nav li:hover ul, .nav li li:hover ul { top: -999em; }

The first part of the rule will hide the first level before you've had a chance to see it.