Thread: Drop UP Menu

Hi everyone, hope you all have been well, haven't been here in a while.

I have a bit of a problem, I have busy developing a site for a client, but they want a drop down menu as navigation that goes UPWARD in stead of the normal downward way.

Do any of you have examples or experience with this?

Any help would be greatly appreciated.

I found one here, but you have to pay for it:

Stu Nicholls | CSSplay | A CSS only simplified pull-up menu with two fly-outs

Thanks

Richy, the rest of the site uses normal drop downs, I will create the one I want and then post it here, probably tomorrow only and see if you can reverse it, but HTF would that work? lol, thanks for looking, will update tomorrow.

Hi, I have some problems with my normal drop down now

here is the test file
http://www.booknews.co.za/y/test.htm

As you can see the higher and further education I have made it a fixed width, but now instead of making a double line for the menus that are too long it goes over each other, is there any way to fix that? I am not that clued up with CSS.

There is the css for the drop down:

Code:

/*STYLING FOR CATEGORY DROP DOWNS*/
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix{display: inline-table;}

#category_nav #cat_nav_items {margin: 0px;height: 20px;}
#category_nav #cat_nav_items, #category_nav #cat_nav_items ul {/* all lists */ padding: 0px; list-style: none; line-height: 1px;	z-index: 100000;}
#category_nav #cat_nav_items a     {display: block; text-decoration: none;}
#category_nav #cat_nav_items li    {border-right:0px solid #000;  /* all list items */ float: left;  width: auto; /* width needed or else Opera goes nuts */	list-style: none;  }
#category_nav #cat_nav_items li:hover, #category_nav #cat_nav_items li.hover {position:static;}
#category_nav #cat_nav_items li a  {width: auto; padding: 8px 8px 11px 8px; text-align: center;}
#category_nav #cat_nav_items li a:hover .a_he  {width: auto; padding: 8px 8px 11px 8px; text-align: center; background:#009999;}
#category_nav #cat_nav_items li ul {/* second-level lists */ border-width:0px 0px 0px 0px; border-color:#d2ab05; border-style: none; position: absolute; background-color: #fcd50c; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */	padding: 0px 0px 0px 0px;margin-left:0px;}
#category_nav #cat_nav_items li ul li { float: none; border-bottom: 1px solid #FFF;}
#category_nav #cat_nav_items li ul li a {width: auto; text-align: left; background-image: none; text-transform: none; padding-top: 4px; padding-bottom: 4px;	display: block;}
#category_nav #cat_nav_items li:hover ul ul, #category_nav #cat_nav_items li.sfhover ul ul { left: -999em; }
#category_nav #cat_nav_items li:hover ul, #category_nav #cat_nav_items li li:hover ul, #category_nav #cat_nav_items li.sfhover ul, #category_nav #cat_nav_items li li.sfhover ul { /* lists nested under hovered list items */	left: auto;}

	/* Higher Education Menu*/
	#category_nav #cat_nav_items li .cat_nav_he { width:100px; opacity:.8; /* FX/Opera/Safari/Chrome */ -ms-filter:"alpha(opacity=80)"; /* IE8 */ filter:alpha(opacity=80); /* IE6/IE7 */	/* second-level lists */ position: absolute; background:#009999; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */	padding: 0px 0px 0px 0px;margin-left:0px;}
	#category_nav #cat_nav_items li .cat_nav_he a {font-family:Verdana; color:#FFFFFF; font-size:11px; padding:8px 5px 8px 5px;}
	/* Further Education Menu*/
	#category_nav #cat_nav_items li .cat_nav_fe {	width:100px;/* second-level lists */ position: absolute; background:#5C8533; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */	padding: 0px 0px 0px 0px;margin-left:0px;}
	#category_nav #cat_nav_items li .cat_nav_fe a {font-family:Verdana; color:#FFFFFF; font-size:11px; padding:8px 5px 8px 5px;}
	/* Adult Education Menu*/
	#category_nav #cat_nav_items li .cat_nav_ae {opacity:.8; /* FX/Opera/Safari/Chrome */ -ms-filter:"alpha(opacity=80)"; /* IE8 */ filter:alpha(opacity=80); /* IE6/IE7 */	/* second-level lists */ position: absolute; background:#663333; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */	padding: 0px 0px 0px 0px;margin-left:0px;}
	#category_nav #cat_nav_items li .cat_nav_ae a {font-family:Verdana; color:#FFFFFF; font-size:11px; padding:8px 5px 8px 5px;}
	/* Home Education Menu*/
	#category_nav #cat_nav_items li .cat_nav_homee {	/* second-level lists */ position: absolute; background:#D68533; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */	padding: 0px 0px 0px 0px;margin-left:0px;}
	#category_nav #cat_nav_items li .cat_nav_homee a {font-family:Verdana; color:#FFFFFF; font-size:11px; padding:8px 5px 8px 5px;}
	/* Professional Menu*/
	#category_nav #cat_nav_items li .cat_nav_pe {	/* second-level lists */ position: absolute; background:#853385; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */	padding: 0px 0px 0px 0px;margin-left:0px;}
	#category_nav #cat_nav_items li .cat_nav_pe a {font-family:Verdana; color:#FFFFFF; font-size:11px; padding:8px 5px 8px 5px;}
	/* Children Menu*/
	#category_nav #cat_nav_items li .cat_nav_c {	/* second-level lists */ position: absolute; background:#AD3333; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */	padding: 0px 0px 0px 0px;margin-left:0px;}
	#category_nav #cat_nav_items li .cat_nav_c a {font-family:Verdana; color:#FFFFFF; font-size:11px; padding:8px 5px 8px 5px;}
/*END OF STYLING FOR CATEGORY DROP DOWNS*/

please halp

Hi RR, dont stress, I sorted it out, thanks.

Will let you know I get to the upside down drop down

Thanks for looking at it in anyways!