CSS Dropdown menu for the header- With Categories!

[Chriswww]

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

[jettrue]

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.

[Chriswww]

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



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

[jettrue]

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



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. 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;
	}

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

[jettrue]

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)

[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

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

[jettrue]

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!

[jettrue]

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. It's easy to make a mistake.