homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Drop-up Navigation List
Instead of Drop-down list

5+ Year Member

Msg#: 4406861 posted 7:17 pm on Jan 14, 2012 (gmt 0)


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:


<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>


/*---------------[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; }



10+ Year Member

Msg#: 4406861 posted 11:09 am on Jan 15, 2012 (gmt 0)


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


.nav ul {
bottom:1.3em;/* height of top level nav - adjust to suit*/
.nav li:hover ul, ul.nav li.sfHover ul {

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved