CSS Dropdown menu for the header- With Categories!

I've also tried various other commands in css such as text-align but it just knocks the field out along with the text.

Chriswww:

A big thanks from me for your contribution here jettrue.

I've got the menus roughly how I want them over at tupshup.com however, I cannot seem to align the menu text without knocking the fields out. For example I've tried:

div#dropMenu ul ul li {
border: 1px solid #696537;
/*border-left:1px solid #000000; */
width:99.4%;z-index:1000;
padding-top: 1em;
}

But then in some of the sub menus the padded area is unhoverable. Any ideas? Forgive me but I'm still new to this so it'll no doubt be something simple.

What do you mean, align them? Align them with what? The menu looks fine to me. :smile:

Vertical text alignment in sub menus, checkout the screen shot:

[IMG]http://i380.photobucket.com/albums/oo249/buljing/th_menuerr.gif[/IMG]

My cursor is hovering over the highlighted menu, believe it or not :)

Chriswww:

Vertical text alignment in sub menus, checkout the screen shot:

[IMG]http://i380.photobucket.com/albums/oo249/buljing/th_menuerr.gif[/IMG]

My cursor is hovering over the highlighted menu, believe it or not :)

Use the stylesheet_header_menu.css below. The problem is that you put the padding in the wrong place. Let me know how it works for you. :smile: If you want more padding in the drop down section, change it here:
padding: 1.1em 0 1.1em 0.25em;

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

/*Ochre*/ 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #000000!important;background:#D9DED8;}


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

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

#dropMenuWrapper {height:3.6em;background:#696537;}
	
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.6%;
	}
	
div#dropMenu ul.level1 {
	width:100%;
	margin:0 auto; 
	text-align:center;
	background:#696537; /*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:1.1em 0;
	text-decoration: none; 
	color:#D9DED8; 
	/*border-right: 1px solid #000000;**/
	font-size: small;
	font-weight: bold;
	text-align:center; 
	}	
	
	
	
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
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: 1px solid #696537; 
	/*border-left:1px solid #000000; */
	width:99.4%;z-index:1000;
	}

/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
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; 
	width: 100%;
	display:block;
	z-index:1000;
	}
	
div#dropMenu ul.level2 {
	background:#9BB191;
	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: 100%; background:#9BB191}
div#dropMenu ul.level2 a {padding: 1.1em 0 1.1em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#9BB191;}

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

I apologise if this has been covered, but I havent found anything of yet, isit possible to have each category on the menu to have a different width, for example... If I had

Home : About Us : Questions and Answers : Gallery : Contact us

At the moment the spacing for each category on the menu is exactly to whatever ive set the % in the CSS, but the questions and answers is too long and drops down a line making it look untidy. Instead of having the same width for each category no matter how long the description is, can I set a margin for each Category listed? So basically it would be the gap/margin between each category which I need to define rather than the actual box its in.

Hope that makes sense
Kind Regards
Sam

Just added an image of what I mean to make it clearer, I want to get the layout similar to the top, but because of the same width of category box, im getting the drop down....

sam_m:

I apologise if this has been covered, but I havent found anything of yet, isit possible to have each category on the menu to have a different width, for example... If I had

Home : About Us : Questions and Answers : Gallery : Contact us

At the moment the spacing for each category on the menu is exactly to whatever ive set the % in the CSS, but the questions and answers is too long and drops down a line making it look untidy. Instead of having the same width for each category no matter how long the description is, can I set a margin for each Category listed? So basically it would be the gap/margin between each category which I need to define rather than the actual box its in.

Hope that makes sense
Kind Regards
Sam

Just added an image of what I mean to make it clearer, I want to get the layout similar to the top, but because of the same width of category box, im getting the drop down....

You can do this by removing the width percentages, and instead try messing with the left and right padding that looks like this:

padding: .6em 0;

(The 0 is the current left and right padding, the .6em is for the top and bottom padding)

Hello JetTrue...

Just a brief question about security settings and your contribution (which I love, by the way).

When I posed the question, one of the ZenCart gurus said that - for the entire site - I should set ALL folder permissions to 755, and ALL file permissions to 644.

I assume I would use my host's file manager tool to do this recursively from the top-most site folder, but before doing so, I thought it would be prudent to ask the authors of the contributions I'm using how this would affect their mods.

So, would performing such an activity have an adverse effect on the CSS Flyout menus?

Thanks,
-DBB1

OK, I am going bollistic trying to ge tthis menu to work on my site. I added it to my original site and the entire page disappears. I then added it to a new site (from a fresh install) http://test.ieguana.com following instructions completely. I added the access files where necessary and everything.

So, if you look at the site I mentioned, you will find my current problem. Hopefully someone can help me with this. I would love to get this working correctly. maybe it is somethign that I am looking to hard for.

DBB1:

Hello JetTrue...

Just a brief question about security settings and your contribution (which I love, by the way).

When I posed the question, one of the ZenCart gurus said that - for the entire site - I should set ALL folder permissions to 755, and ALL file permissions to 644.

I assume I would use my host's file manager tool to do this recursively from the top-most site folder, but before doing so, I thought it would be prudent to ask the authors of the contributions I'm using how this would affect their mods.

So, would performing such an activity have an adverse effect on the CSS Flyout menus?

Thanks,
-DBB1

I have no idea, sorry!

ieguana:

OK, I am going bollistic trying to ge tthis menu to work on my site. I added it to my original site and the entire page disappears. I then added it to a new site (from a fresh install) http://test.ieguana.com following instructions completely. I added the access files where necessary and everything.

So, if you look at the site I mentioned, you will find my current problem. Hopefully someone can help me with this. I would love to get this working correctly. maybe it is somethign that I am looking to hard for.

If its done right, it works.

You have not uploaded all files into their correct folders. Check, double, triple check. Then check again if its still not working. :smile: It's easy to make a mistake.

jettrue:

If its done right, it works.

You have not uploaded all files into their correct folders. Check, double, triple check. Then check again if its still not working. :smile: It's easy to make a mistake.

I found the problem. For some reason (me obviously) the modules>sidebox>my_template was in the wrong place. Normally I can add the sidebox modifications to the modules>sidebox folder and get away with it. This mod required the extra directory to make it work. Everything else worked perfectly in the directories I used.

That said, I wanted to say how much I love this mod. The site takes on a whole new look when trying to locate the items listed on the site. Customers will be able to navigate the site with less work, and it gives a more professional look to the site.

Hello,

Great add on!:smile:

I add Publishers to the menu and I cannot get it to line correctly as the other 6 Menu.

I change stylesheet_header_menu.css to 98% and that did not work.

Can you take a look at my Test Site.

Thank you in advance!

Royal:

Hello,

Great add on!:smile:

I add Publishers to the menu and I cannot get it to line correctly as the other 6 Menu.

I change stylesheet_header_menu.css to 98% and that did not work.

Can you take a look at my Test Site.

Thank you in advance!

You have to open up includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css and change these:
16.667
16.649

Divide 100% by 7 (since you now have 7 menu items) which is 14.285. Use 14.285 for the top number, and use a slightly smaller number for the second one (its for IE, and IE needs a slightly smaller percentage)

Hey all,

I have been trying to correct a problem with my header, in ie7 it lines up at the bottom of the logo header and in mozilla its pushed up by a few px's does anyone know how to correct this?

Link: https://www.truwater.com.au

Thanks

Hi! my problem is the same as this person from this post: http://www.zen-cart.com/forum/showthread.php?t=105702

when i hover, the dropdown box doesnt have the same width. can anyone please tell me how to change that?

Thanks!!

ibling:

Hi! my problem is the same as this person from this post: http://www.zen-cart.com/forum/showthread.php?t=105702

when i hover, the dropdown box doesnt have the same width. can anyone please tell me how to change that?

Thanks!!

Open up includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css and change the width 12em to something wider.

thank you so much for replying! its working !! :)

Great mod! I've been able to fix most of my issues my reading this thread, but I'm getting close to launch and have a persistent one. I can't get the dropdown menus to display on top of my embedded images or videos like here.

My Account menu is a good example. Oddly enough, the menu displays on top of the rightside banner (correct) but underneath the google video.

I bumped up the z-index but it didn't work. The issue is the same in Firefox (3.06) and IE(7.0.5730.11).

Thanks in advance. Hope to contribute something someday (after asking all my SEO questions elsewhere!)

Fresh Zen Cart 1.3.8a install
Database Patch Level: 1.3.8

Hope someone can help. After looking at almost all of this thread trying to locate where you can add an arrow image to the menu indicating there is a sub-category. Can some point this out to me pls.

tks

covone:

Hope someone can help. After looking at almost all of this thread trying to locate where you can add an arrow image to the menu indicating there is a sub-category. Can some point this out to me pls.

tks

It's right there in stylesheet_header_menu.css:
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */

Just remove the /* and the */

The above puts a down arrow on the main menu to show that its a drop down, and then theres this one which shows a category has subcategories:

/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */