CSS Dropdown menu for the header- With Categories!

[Woodymon]

What's your set width for dropMenuWrapper and dropMenu? What's your font size for the menu?

The main thing is all now stays on one line and does not wrap in either IE6 or FF. With your assistance I have succeeded. Thanks!

Anyone aware of a good web resource explaining how FF, IE6 and IE7 respond to CSS and providing workarounds and hacks?

Below is my latest relevant CSS. Still some "em" values to convert to "px" but I'm slowly getting there (no real need to convert for the submenu items).

Woody

#dropMenuWrapper {
	width: 100%; /* ORIG */
	height: 5px; /* ORIG */
	margin: 0; /* ORIG  */
	font-size: 11px; /* ORIG */
	padding-bottom: 1px;  
	}
	
div#dropMenu {
	width: 840px; 
	margin: 0 auto; /* ORIG */
	text-align: center; /* ORIG */
	z-index: 1000; /* ORIG */
	position: relative; /* ORIG */
	}

div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
	
div#dropMenu li { 
	position: relative; /* ORIG */
	list-style: none; /* ORIG */
	margin: 0; /* ORIG */
	float: left; /* ORIG */
	line-height: 1em; /* ORIG */
	width: 16.667%; /* width added by jade */
	background: #A5B7E9; /*NOT IN ORIG */
	}
	
div#dropMenu ul.level1 {
	width: 70em; /* ORIG  NOT ME */
	margin: 0 auto; /* ORIG  NOT ME */
	text-align: center; /* ORIG */
	height: 2.17em; /* ORIG */
	z-index: 1000; /* ORIG */
	}

div#dropMenu li a {
	display: block; /* ORIG */
	padding: 5px 0 5px 0; /* by Jade */
	text-decoration: none; /* ORIG */
	text-transform: uppercase; /* ORIG */
	color: #ffffff; /* ORIG */
	text-align: center; /* ORIG */
	border-right: 1px solid #ffffff; /* ORIG */
	border-left: 1px solid #ffffff; /* by jade  */
	}	

div#dropMenu ul.level2 {
	top: 3px;
	background: #4f4f4f;
	z-index: 1000;
	left: 0; /* recommend by jade */
	}

[jettrue]

The main thing is all now stays on one line and does not wrap in either IE6 or FF. With your assistance I have succeeded. Thanks!

Anyone aware of a good web resource explaining how FF, IE6 and IE7 respond to CSS and providing workarounds and hacks?

Below is my latest relevant CSS. Still some "em" values to convert to "px" but I'm slowly getting there (no real need to convert for the submenu items).

Woody

#dropMenuWrapper {
	width: 100%; /* ORIG */
	height: 5px; /* ORIG */
	margin: 0; /* ORIG  */
	font-size: 11px; /* ORIG */
	padding-bottom: 1px;  
	}
	
div#dropMenu {
	width: 840px; 
	margin: 0 auto; /* ORIG */
	text-align: center; /* ORIG */
	z-index: 1000; /* ORIG */
	position: relative; /* ORIG */
	}

div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
	
div#dropMenu li { 
	position: relative; /* ORIG */
	list-style: none; /* ORIG */
	margin: 0; /* ORIG */
	float: left; /* ORIG */
	line-height: 1em; /* ORIG */
	width: 16.667%; /* width added by jade */
	background: #A5B7E9; /*NOT IN ORIG */
	}
	
div#dropMenu ul.level1 {
	width: 70em; /* ORIG  NOT ME */
	margin: 0 auto; /* ORIG  NOT ME */
	text-align: center; /* ORIG */
	height: 2.17em; /* ORIG */
	z-index: 1000; /* ORIG */
	}

div#dropMenu li a {
	display: block; /* ORIG */
	padding: 5px 0 5px 0; /* by Jade */
	text-decoration: none; /* ORIG */
	text-transform: uppercase; /* ORIG */
	color: #ffffff; /* ORIG */
	text-align: center; /* ORIG */
	border-right: 1px solid #ffffff; /* ORIG */
	border-left: 1px solid #ffffff; /* by jade  */
	}	

div#dropMenu ul.level2 {
	top: 3px;
	background: #4f4f4f;
	z-index: 1000;
	left: 0; /* recommend by jade */
	}

Try changing that 70em to 840px. Also, since your menu is now a set width, instead of using 16.667%, you can use 140px instead. (840px divided by 6).

[Woodymon]

Try changing that 70em to 840px. Also, since your menu is now a set width, instead of using 16.667%, you can use 140px instead. (840px divided by 6).

Hey thanks. Very good recommends and learning something at the same time.

I also discovered
div#dropMenu ul.level2
top: 22px;
was needed. Otherwise when hover over Home in menu, the drop down menu covered the Home link.

Woody

[Tieske]

Hi,

Is there a way to make the menu "sticky"? I'm using a css horizontal menu with a horizontal flyout for over a year and am wondering if somebody knows how to make the menu "sticky" for 5-10 seconds.

This would realy increase the usability since when you don't move the cursor acurate, the menu gets killed.

Thanks in advance.

[jettrue]

Hi,

Is there a way to make the menu "sticky"? I'm using a css horizontal menu with a horizontal flyout for over a year and am wondering if somebody knows how to make the menu "sticky" for 5-10 seconds.

This would realy increase the usability since when you don't move the cursor acurate, the menu gets killed.

Thanks in advance.

No, unfortunately it is not an option with a css only menu, that would be available in a javascript based menu.

There's no gap between your menu item and the drop downs below it, is there?

[Tieske]

No, unfortunately it is not an option with a css only menu, that would be available in a javascript based menu.

There's no gap between your menu item and the drop downs below it, is there?

I thought so (java), thanks anyway.

The menu is working just fine (www interieurbeslag nl), but visitors have to balance with their cursor between the upper and lower borders of the menublocks since it also flies horizontal.

The best solution will be changing it to an horizontal menu with vertical flyout like the dropmenu discussed here.

A quick change didn't work since I had trouble with the submenu of the catagories with this menu. And I forgot what makes a flyout vertical... learning by doing a year ago wasn't ideal for long term ;).

[jorvikgames]

Hi
I'm using this rather nice menu but have hit a problem - some of my categories go more than 5 deep - and the flyout does strange things once you are 4 subcats in - it automatically pops out all the lower subs into an unusable mess. Is there any way to extend the depth this menu supports as I guess that lvl 4 behaviour is in the code somewhere...?

Thanks for any help

WOoDY
(www.jorvikgames.co.uk)