CSS Dropdown menu for the header- With Categories!

[Sermonzone]

thanks for this contrib. I have done some customizing that other may like and will be glad to share the code when it is finished.

However, http://www.sermonzone.com/zc-137/ currently looks great if Firefox and TERRIBLE in IE7. I suspect I inserted the code for the search box in the wrong place and would appreciate some help finding the solution.

EDIT *** The tpl_drop_menu.php is attached

[all4coffee]

I'm using Academe template and the HoverBox for display of large images along with the CSS Dropdown Menu.

One issue only. The CSS Dropdown menu bar is displaying over the HoverBox container. I looked in HoverBox's stylesheet but couldn't figure out how to fix this. I did post it originally as aquestion on the HoverBox forum - but they don't respond... Here is the link to one of my products' page when you can see what is happening whenopening a large image:
http://www.time-co.com/zencart/index.php?main_page=product_info&cPath=16&products_id=54

You guys are always so responsive - is there anything on the CSS Menu side that could fix this problem for me? I would much appreciate any advice...

[mauryg]

Jettrue,
I have run into the situation where there are so many subcategories in the level 3 submenu that they extend below the page bottom. IF you have a wheel mouse you can scroll down the submenu chain. If not, if you try to move over to use the scroll bar on the right side, the menu disappears.
Do you think it would be possible to redo the CSS and maybe the template so that the subcategories (level 2 and lower) were listed in one or more horizontal rows rather than a vertical column?

Maury

[jettrue]

Do you think it would be possible to redo the CSS and maybe the template so that the subcategories (level 2 and lower) were listed in one or more horizontal rows rather than a vertical column?

Maury

that is not in my plans, but if someone else wants to figure out something like that, that would be great!

[CES]

I'm using Academe template and the HoverBox for display of large images along with the CSS Dropdown Menu.

One issue only. The CSS Dropdown menu bar is displaying over the HoverBox container. I looked in HoverBox's stylesheet but couldn't figure out how to fix this. I did post it originally as aquestion on the HoverBox forum - but they don't respond... Here is the link to one of my products' page when you can see what is happening whenopening a large image:
http://www.time-co.com/zencart/index.php?main_page=product_info&cPath=16&products_id=54

You guys are always so responsive - is there anything on the CSS Menu side that could fix this problem for me? I would much appreciate any advice...

Try searching this thread for "lightbox".

Should sort out your problem. Let us know how you get on.

Craig

[all4coffee]

Try searching this thread for "lightbox".

Should sort out your problem. Let us know how you get on.

Craig

Craig,

since my problem was not with a lightbox but with HoverBox I located my hoverbox stylesheet and changed the z-index setting from 100 to 1000 so it now reads like this:

#hoverbox{
position: absolute;
left: 0;
width: 100%;
z-index: 1000;
text-align: center;
line-height: 0;
}

Thank you so much for your help! Worked like a charm. This forum is the best.

[crinolina]

hi
how i can get rid of the gap betwen menu levels?
http://lifebaby.freehostia.com/gap.html


HELP ME PLEASE
Thanks you!

[CES]

Can we see a link to your store or the contents of your css file?

Craig

[crinolina]

http://lifeconstruct.freehostia.com

and this is the stylesheet_header
body {
behavior: url(includes/csshover.htc);
}

/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!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%;
}

div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background:#4f4f4f;
z-index:1000;
float:left;
}

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 {display: block; padding: .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {position: absolute; width: 8em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:8em;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 {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;}

thank you!!!!

[saher.alsous]

Craig,

since my problem was not with a lightbox but with HoverBox I located my hoverbox stylesheet and changed the z-index setting from 100 to 1000 so it now reads like this:

#hoverbox{
position: absolute;
left: 0;
width: 100%;
z-index: 1000;
text-align: center;
line-height: 0;
}

Thank you so much for your help! Worked like a charm. This forum is the best.

thank you

that solved it!