Drop-up Navigation List

Instead of Drop-down list

[adder]

Hi,

I'm trying to invert a CSS dropdown list so that it unfolds upwards.
I'm basically moving the navigation list from the header to the footer and I need the elements to appear above the baseline.

Is it possible?
This is what I have now:

HTML:

<li class="page_item page-item-1">Parent Item</a>

<ul class='children'>
<li class="page_item page-item-11">Page Item 1</li>
<li class="page_item page-item-12">Page Item 2</li>
</ul>
</li>

CSS:

/*------------------------------------------------*/
/*---------------[PAGES NAVIGATION]---------------*/
/*------------------------------------------------*/
#pages { width: 950px; float: left; min-height: 59px; background-color: #000; }
#pages ul { list-style-type: none; list-style-image: none; float: left; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 15px; }
#pages li { float: left; display: block; margin-top: 0px; margin-bottom: 0px; padding: 0px; }
#pages li a:link, #pages li a:visited { float: left; color: #6CFF00; display: block; height: 40px; padding-top: 19px; font-size: 13px; padding-left: 15px; padding-right: 15px; margin-bottom: 0px; text-transform: lowercase; font-weight: bold; }
#pages li a:hover, #pages li a:active { color: #FFF; font-size: 13px; margin-bottom: 0px; text-transform: lowercase; font-weight: bold; }

/*---------------[DROPDOWN MENU]---------------*/
.nav, .nav * { margin:0; padding:0; list-style:none; }
.nav ul { position:absolute; top:-999em; background-image: url(images/dropdown-bg.png); padding-bottom: 10px; background-position: bottom; background-repeat: no-repeat; }
.nav li { float:left; position:relative; z-index:99; font-size:12px; }
.nav a { display:block; }
.nav ul li { width: 100%; }
.nav li:hover ul, ul.nav li.sfHover ul { left:-10px; top:39px; }
.nav li:hover li ul, .nav li.sfHover li ul { top:-999em; }
.nav li li:hover ul, ul.nav li li.sfHover ul { left:210px; top:0px; }
.nav li:hover ul, .nav li li:hover ul { top: -999em; }
.nav li li { display: block; padding: 0px; }
.nav li:hover { background-image: url(images/categories-bg-2.gif) !important; background-repeat: repeat-x !important; background-color: #474747 !important; font-weight: normal !important; }
.nav li li a:link, .nav li li a:visited { width: 160px; display: block; background-color: #474747; padding: 10px 30px 0px 30px !important; margin: 0px 0px 0px 0px; border: none !important; font-weight: normal !important; }
.nav li li a:hover { background-image: none !important; background-color: #1C1B1B !important; border: none !important; color: #FFF !important; }

[Paul_o_b]

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.