CSS Dropdown menu for the header- With Categories!

[shelshell]

I used the version Jettrue uploaded. No changes per pauls edition.

[Website Rob]

OK, if you are familiar with using the Developers Tool Kit then you would know that "your header.php & your stylesheet.css" files are the ones needing editting and, knowing the "id" and/or "class", where to make the changes.

Didn't know you were using a Mod for the Header so not sure how that affects settings nor the two files mentioned above. Might explain though, why the Font size is so small in IE and would definitely explain why your Navigation Menu is not displaying properly.

[shelshell]

That's why I posted in this thread. The problem I'm having is with the CSS dropdown menu this thread is about. I installed it, tried to add/change a few of the menu listings at the top, and now the presentation is showing incorrectly. It seems to have to do with removing the drop down menus. When I replace the original code, it works. When I remove the drop down menus, it creates the incorrect spacing.

Can someone that's familiar with this mod help me out?

[CES]

The person to help you best is obviously Jettrue, however he seems to be absent at the moment (Hope everything is OK).

I've had a look at the css and it looks OK. However if you've made major adjustments to the 'tpl_drop_menu.php' it might be best if you post the code here.

Craig

[d1driftbiz]

Hi there, got issues with the menu, it seems to be conflicting with the greybox mod i have applied. when the greybox is activated, the menu seems to sit infornt of the image, instead of behind it. how can i go about fixing this???

thanks Jas :)

[saher.alsous]

Hi there, got issues with the menu, it seems to be conflicting with the greybox mod i have applied. when the greybox is activated, the menu seems to sit infornt of the image, instead of behind it. how can i go about fixing this???

thanks Jas :)

change the Z-index of the menu to be lower than the image, or the z-index of the image to be above 1000

[d1driftbiz]

change the Z-index of the menu to be lower than the image, or the z-index of the image to be above 1000

where do i change the z-index? i have been looking through the header files and cant seem to see anything??

thanks!

[jettrue]

That's why I posted in this thread. The problem I'm having is with the CSS dropdown menu this thread is about. I installed it, tried to add/change a few of the menu listings at the top, and now the presentation is showing incorrectly. It seems to have to do with removing the drop down menus. When I replace the original code, it works. When I remove the drop down menus, it creates the incorrect spacing.

Can someone that's familiar with this mod help me out?

Are you using the newest version of this mod?

Anyhoo, replace your stylesheet_header_menu.css with this code:

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f310a!important;background:#d5e88f;}
	
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:#4F3212; /*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: .6em 0; 
	text-decoration: none; 
	text-transform:uppercase; 
	color:#ffffff; 
	text-align:center; 
	border-right:1px solid #ffffff;
	}	
	
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-bottom: 1px solid #CCC; width:12em;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: 12em;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: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

You'll also need to open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php

and change your cart link to this:

<li class="submenu"><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>

Then your cart link won't have a white line at the end.

Sorry I was so slow to reply.

[maraud]

I installed the plugin but nothing shows up in the menu, except for the brown background color. Can someone advice how to fix this?

[jettrue]

I installed the plugin but nothing shows up in the menu, except for the brown background color. Can someone advice how to fix this?

Link Please?