CSS Dropdown menu for the header- With Categories!

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

[jettrue]

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)

Part of the issue is the length of your category names. They're trying to take up two lines, and its causing problems down the road. I would change all instances of 12em in stylesheet_header_menu to at least 13em, maybe even 13.5 or 14em.

Now, the issue where hitting level three in order to pop out level 4, and level 5 pops out as well, I can't fix (its a mystery i haven't been able to solve), but if you change the width above, it will no longer be jumbled up.

Now, if you want to stop at a certain level, you can open up includes/classes/categories_ul_generator.php and change the value of max level to three, then it will only flyout to level three.

[Moebiusenterprises]

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)

Great site, btw!
However, "Heroes of Azaroth" probably doesn't *really* have "Booser Boxes" (more like WoWarcrack)

[icyorchid]

Hi,
Can you tell me how to make the drop down menu to the width of the my site?

I also would like to change the color to the drop down menu.
Something that will make it pop. Any color suggestions with the
code would be appreciated. :)

I don't like red or green. lol

Thanks
Sandra
http://www.the-unique-boutique.com

[Moebiusenterprises]

Hi,
Can you tell me how to make the drop down menu to the width of the my site?

I also would like to change the color to the drop down menu.
Something that will make it pop. Any color suggestions with the
code would be appreciated. :)

I don't like red or green. lol

Thanks
Sandra
http://www.the-unique-boutique.com

The color changes are simple CSS (in the stylesheet). Coordinate the colors with those you're already using on your site for the best look.

As far as the changing size, that has been thoroughly addressed in this thread... go back a couple pages & you'll find it easily :)

cheers!

[jettrue]

Hi,
Can you tell me how to make the drop down menu to the width of the my site?

I also would like to change the color to the drop down menu.
Something that will make it pop. Any color suggestions with the
code would be appreciated. :)

I don't like red or green. lol

Thanks
Sandra
http://www.the-unique-boutique.com

Here's a bunch of css for you.... I started to play with it on your site, and ended up doing all the work for ya, LOL. Replace stylesheet_header_menu.css with everything below.

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*this is the text color and background color when things are hovered over down the menu*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #ffffff!important;background:#2b68ab;}
	
#dropMenuWrapper {
	width:100%;
	height:35px;
	margin:0;
	font-size:11px;
border-left:1px solid #999999;
	}
	
div#dropMenu {
  	width:100%;
  	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}

div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
	
div#dropMenu li {
	position: relative; 
	list-style: none; 
	margin: 0; 
	float: left; 
	line-height: 1em;
width:12.5%;
	}
	
div#dropMenu ul.level1 {
	width:100%; 
	margin:0 auto; 
	text-align:center;
	background:#ffffff; /*this is the background color of the main menu*/
	height:35px;
	z-index:1000;
	}
	
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 9px 0;text-decoration: none; text-transform:uppercase; color:#000000; text-align:center; border-right:1px solid #999999;height:17px;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 16em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:16em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 35px; background:#999999;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 16em; background:#F0555C}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */

The above will make the menu fill your site (I changed the two instances of 750px to 100%), will make each item have a percentage width, gave each item a bigger height since you have a lot of drop downs and some of them would wrap onto two lines, and also adjusts color. You are actually using the categories version of the drop down menu which was developed by someone else, though I don't think he started a support thread, so its fine to ask questions here.