CSS Dropdown menu for the header- With Categories!

first trading:

It looks like you simply don't have a colour on one of your :hover styles in the stylesheet.

If you download firefox and firebug you can see exactly what is what and it saves you so much time.

Forgot to add......................and web developers tool kit.

Hello, FASTTRADING:

Thank you for your reply. But I still don;t know how to do it. I don't knowabout fixfox and firebug.....

How can I edit the stylesheet so that a red color shows up when I hover over lever 2 or 3?

All good .. no problems .. rechecked files and had forgotten one and voila working. Now just gotta figure out how to style it.

lina0962:

Hello, FASTTRADING:

Thank you for your reply. But I still don;t know how to do it. I don't knowabout fixfox and firebug.....

How can I edit the stylesheet so that a red color shows up when I hover over lever 2 or 3?

Find this in your header stylesheet:

div#dropMenu ul.level1 a:hover

and add this to it:

background-color: #ff0000;

I think that is the element for that hover, if not let me know. I've altered mine so much i can't just simply compare any more so you'll have to bear with me.

wotnow:

Hi just finished uploading your module and now my whole site from the header down has disappeared and I am havn a little freak out. Hope you can help .. thanks

Site is: http://www.rosedakinjewellery.com.au/index.php?main_page=product_info&cPath=4&products_id=40

Its not my module, i am however trying to get a version of it working. A few posts up someone asked for a wider categories with epanded menu tree that could be styled. I'm trying to get a dynamic version of that working.

first trading:

Find this in your header stylesheet:

div#dropMenu ul.level1 a:hover

and add this to it:

background-color: #ff0000;

I think that is the element for that hover, if not let me know. I've altered mine so much i can't just simply compare any more so you'll have to bear with me.

Fasttrading:

I put the code there. No luck......

I saw some other people's websites. They put the font color of the first level as white, and it change to some other color when they hover over level 2 or 3. How do they achive that?

lina0962:

Fasttrading:

I put the code there. No luck......

I saw some other people's websites. They put the font color of the first level as white, and it change to some other color when they hover over level 2 or 3. How do they achive that?

Ok, i have it for you. This first one sets the colour for background on the top horizontal menu:

div#dropMenu li:hover {
display: block;
background-color: #ff0000;
}

This one sets the colour of the text on the top level horizontal:

div#dropMenu ul.level1 a:hover {
color: #ffffff;
}

And this one sets the text colour of the drop down:

div#dropMenu ul.level2 a:hover {
color: #000000;
}

Adjust colours to suit.

JGraphics:

Hello,
I would love to have this CSS drop down menu open up to a larger selection option of sub-categories when you hover over a main category. I have included a "screen shot" of what I'm trying to achieve. Any help on this would be greatly appreciated. The site I took the screen shot from sells safety supplies. You can see I was hovering over "Personal Protection" and a very large subcategory popped up and offered quite a few subcategories. The sub category links are simple text links.

After tinkering for hours i discovered how to have a fully expanded category tree on the drop down. All css, no category generator(s).

Now you can hover over the level 1, the drop down......err, drops down and you now have a category menu with all of the categories, sub categories and their sub categories expanded.

I'll provide a link to a test site of mine with this working for anyone interested, please remember i have'nt started to style this yet but i will update when i have.

https://www.gearsofwargear.com

Hi have installed this great module but for some reason the last link .. shopping cart is sitting up 1 px from the rest of the menu .. any ideas as to why? Thanks

Site is:http://www.rosedakinjewellery.com.au/index.php?main_page=product_info&cPath=3&products_id=30

Hey all,

Love this addon, and I've got a pretty good grip on how to mod it to my liking, however I'm having one slight problem that I'd like to fix if possible.

When you highlight a Top Level Categiry in the Drop down menu, and the submenus appear, you can set it so that a different color appears using :hover

I want to make it so that the Top Level Category color remains the same as it is when you hover over it, while that specific drop down submenu is open.

Hopefully I explained that well enough,
Any questions to help clear what I'm looking for up, let me know.

Appreciate any and all ideas for this.

Cheers,
Ravyn

Ravyn:

Hey all,

Love this addon, and I've got a pretty good grip on how to mod it to my liking, however I'm having one slight problem that I'd like to fix if possible.

When you highlight a Top Level Categiry in the Drop down menu, and the submenus appear, you can set it so that a different color appears using :hover

I want to make it so that the Top Level Category color remains the same as it is when you hover over it, while that specific drop down submenu is open.

Hopefully I explained that well enough,
Any questions to help clear what I'm looking for up, let me know.

Appreciate any and all ideas for this.

Cheers,
Ravyn

Find this in your stylesheet:

div#dropMenu li:hover {background-color: #ff0000;}

Change the colour to suit.

first trading:

Find this in your stylesheet:

div#dropMenu li:hover {background-color: #ff0000;}

Change the colour to suit.

That was what my first thought was as well, however it doesn't seem to create the desired effect.

Here's my css for the drop down menu:

button4.png = The Top Level Category Buttons when not active.
button4down.png = The Top Level Category Buttons when you mouseover them.
button3.gif = The background for the submenu as you scroll through it.

I'm trying to get the top level category to stay highlighted (showing button4down.png) as long as the user is scrolling through that particular categories submenu.

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/ 

/*red */
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background: url(../images/button4down.png) 95% 50% no-repeat;}
 

/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/

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:16.667%;
	*width:16.649%;	    
	}
	
div#dropMenu ul.level1 {
	width:100%;
	margin:0 auto; 
	text-align:center;
	background:#494949; /*background color of top menu when NOT selected. */
	z-index:1000;
	float:left;
	}

div#dropMenu li a {
	display: block;
	/* Hides from IE5-mac \*/
	height: 1%;
	/* End hide from IE5-mac */ 
	padding: 0.6em 0; 
	text-decoration: none; 
	text-transform:uppercase; 
	color:#ffffff; 
	text-align:center; 
	/*border-right:1px solid #FF00C0; */
	background: url(../images/button4.png) 95% 50% no-repeat;
	}	
	
div#dropMenu li:hover {background: url(../images/button4down.png) 95% 50% no-repeat;}        
div#dropMenu li.submenu {} 
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:100%;z-index:1000;}
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,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute;left: 3px; width: 127px;display:block;z-index:1000;}
div#dropMenu ul.level2 {background: #4f4f4f;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3, 
div#dropMenu ul.level4, 
div#dropMenu ul.level5, 
div#dropMenu ul.level6, 
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background: #4f4f4f;}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: #000000; text-transform:none; background: #FFFFFF;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f; background: url(../images/button3.gif) 95% 50% no-repeat;}

.clearBoth {
	clear:both;
	height:0;
	font-size:0;
	line-height:0;
	}

I'm trying to get this up and running on my site, using ZenCart 1.3.9d

Rather than a drop-down menu, I'm just getting an expanded tree of links... Something's broken, but I'm not sure what or where. I'm not seeing any errors, and I checked with firefox and at least see some of the CSS code for the menu.

http://hammockgear.com/cart/

Any help would be greatly appreciated. It's probably just some rookie mistake, but I can't seem to narrow it down!

Thanks

OK, Nevermind... I figured it out. thanks anyway!

How can I change the background color of this navbar?

Rich219:

How can I change the background color of this navbar?

Find this in the stylesheet_header_menu.css

div#dropMenu ul.level1 {
background-color: #4f4f4f;
}

Change colour to suit.

Ravyn:

Hey all,

Love this addon, and I've got a pretty good grip on how to mod it to my liking, however I'm having one slight problem that I'd like to fix if possible.

When you highlight a Top Level Categiry in the Drop down menu, and the submenus appear, you can set it so that a different color appears using :hover

I want to make it so that the Top Level Category color remains the same as it is when you hover over it, while that specific drop down submenu is open.

Hopefully I explained that well enough,
Any questions to help clear what I'm looking for up, let me know.

Appreciate any and all ideas for this.

Cheers,
Ravyn

I have this working on a test site and it should work for you also.

div#dropMenu ul.level1 li:hover {
background-image:url(../images/YOUR_IMAGE.gif);
background-position: top center;
background-repeat: no-repeat;
}

div#dropMenu ul.level1 li:hover ul.level2 li:hover {
background:none;
}

Put both in your stylesheet.

first trading:

I have this working on a test site and it should work for you also.

div#dropMenu ul.level1 li:hover {
background-image:url(../images/YOUR_IMAGE.gif);
background-position: top center;
background-repeat: no-repeat;
}

div#dropMenu ul.level1 li:hover ul.level2 li:hover {
background:none;
}

Put both in your stylesheet.

Great, I have to run off to work right now, but i'll test it as soon as I get home later this evening and let you know how it works out.

Really appreciate the support.

Cheers,
Ravyn

Just got in and tried the fix, but still not having any luck. The fix is currently active on the site I sent you the link to in PM if you want to see it live.

This is my current php file:

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/ 

/*red */
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background: url(../images/button4down.png) 95% 50% no-repeat;}
 

/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
div#dropMenu ul.level1 li:hover {
background-image:url(../images/button4down.gif);
background-position: top center;
background-repeat: no-repeat;
}

div#dropMenu ul.level1 li:hover ul.level2 li:hover {
background:none;
}
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:16.667%;
	*width:16.649%;	    
	}
	
div#dropMenu ul.level1 {
	width:100%;
	margin:0 auto; 
	text-align:center;
	background:#494949; /*background color of top menu when NOT selected. */
	z-index:1000;
	float:left;
	}

div#dropMenu li a {
	display: block;
	/* Hides from IE5-mac \*/
	height: 1%;
	/* End hide from IE5-mac */ 
	padding: 0.6em 0; 
	text-decoration: none; 
	text-transform:uppercase; 
	color:#ffffff; 
	text-align:center; 
	/*border-right:1px solid #FF00C0; */
	background: url(../images/button4.png) 95% 50% no-repeat;
	}	
	
div#dropMenu li:hover {background: url(../images/button4down.png) 95% 50% no-repeat;}        
div#dropMenu li.submenu {} 
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:100%;z-index:1000;}
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,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute;left: 3px; width: 127px;display:block;z-index:1000;}
div#dropMenu ul.level2 {background: #4f4f4f;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3, 
div#dropMenu ul.level4, 
div#dropMenu ul.level5, 
div#dropMenu ul.level6, 
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background: #4f4f4f;}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: #000000; text-transform:none; background: #FFFFFF;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f; background: url(../images/button3.gif) 95% 50% no-repeat;}

.clearBoth {
	clear:both;
	height:0;
	font-size:0;
	line-height:0;
	}

Hi

I installed this menu on my site a little while ago and it was working fine, but I have only just realised that there are a couple of issues, mostly with IE.

I'm not sure what I added/changed to cause this problem, but, from memory, the menu files are unaltered.

On IE, none of the sub-menus drop out - only the top levels work.
On Firefox, the only problem is that the categories menu isn't functioning.

Also, I don't think this has anything to do with the menu, but on IE the side column drops below the main pages content.

You can see my site here: http://www.mortalwombat.com.au/shop/

Thanks in advance and I look forward to hearing back.

• Tija

Was trying to change the images that this uses. followed a post to replied to someone else but it didnt work. you mind giving a quick walkthrough? i would appreciate it.