CSS Dropdown menu for the header- With Categories!

[newagekat]

When you uploaded the original, did it have this at the top of the file?

body {
behavior: url(includes/csshover.htc);
}

Yes, i never removed that on your original or my modified file.

i'm having to change the z-index from 1000 975 so that the logo lies over the menu. would this cause a problem?

[jettrue]

Yes, i never removed that on your original or my modified file.

i'm having to change the z-index from 1000 975 so that the logo lies over the menu. would this cause a problem?

Does it happen if you change that back?

What do you have your site defined as in includes/configure.php

with the www or without?

[newagekat]

Does it happen if you change that back?

What do you have your site defined as in includes/configure.php

with the www or without?

.htacces reads:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.yoursite.com$ [NC]
RewriteRule ^(.*)$ http://yoursite.com/$1 [R=301,L]

includes/configure.php reads
define('HTTP_SERVER', 'http://bisousbaby.com');
define('HTTPS_SERVER', 'https://bisousbaby.com');

I'm going to continue making the changes slowly, but I may have to wait until tomorrow. You have to understand, I work on a MAC and have to borrow my sister's PC to view site - so a lot of back and forth and, yes, begging is involved

if you can think of something, would you mind continuing this conversation via chat or something, tomorrow morning? I'm on Pacific time. I can be logged in at 8:30 am. I can send a PM and let you know my Dkype or AIM handle.

I don't mean to impose and I do appreciate your help. you're one of the few still providing support for your mod.

[newagekat]

jettrue:

for the sake of expediency, i am pasting my code for the stylesheet. section in red were added:

body { behavior: url(includes/csshover.htc); }

/*green*/
div#dropMenu li.submenu li.submenu:hover, div#dropMenu li.submenu a:hover
{
color: #ffffff !important;
background: #E0949E;
}

/*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:#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;}
*/

div#dropMenu
{
width: 100%;
height: 40px;
margin: 0 auto;
text-align: left;
z-index: 975;
position: relative;
background: url(/includes/templates/babyboy/images/ribbonPink.jpg) repeat-x left bottom;
font-size: 0.9em;
}

div#dropMenu ul
{
margin: 0;
padding: 0;
}

div#dropMenu li
{
list-style: none;
margin: 0;
float: left;
line-height: 1.5em;
/* width:16.667%;
*width:16.649%; */
}

div#dropMenu ul.level1
{
width: 100%;
margin: 0 auto;
text-align: left;
background: #6B5F5A;
/*background color of top menu when NOT selected. */
z-index: 975;
float: left;
}

div#dropMenu ul.level1 li a
{
display: block;
/* Hides from IE5-mac \*/
height: 1%;
/* End hide from IE5-mac */
padding: .6em 1.1em;
text-decoration: none;
text-transform: uppercase;
color: #E4D7D2;
text-align: left;
font-weight: bold;
}

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

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

div#dropMenu li a.noLine { border: none; }

div#dropMenu>ul a
{
width: auto;
z-index: 975;
}

div#dropMenu ul ul
{
display: none;
background-color: #ffffff;
border: 1px dotted #E1959F;
}

div#dropMenu ul ul li
{
width: 15em;
z-index: 975;
}

/*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: 15em;
display: block;
z-index: 975;
}

div#dropMenu ul.level2
{
background-color: #ffffff;
z-index: 975;
position: absolute;
left: 0;
color: #D66E7B;
}

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: 15em;
background: #ffffff;
border: 1px solid #E1959F;
}

div#dropMenu ul.level2 li a
{
padding: 0.5em 1.25em;
color: #D66E7B;
background-color: transparent;
text-transform: none;
font-weight: normal;
border-bottom: 1px dotted #F3D5D8;
}

/* this is text color on drop-down submenu */
div#dropMenu ul.level2 li a:hover
{
color: #D66E7B!important;
background-color: #F3D5D8;
}

ul.level2 li:hover
{
color: white;
background-color: #E0949E;
}

.clearBoth
{
clear: both;
height: 0;
font-size: 0;
line-height: 0;
}
I've been staring at this for a while. maybe a fresh pair of eyes would be useful.

thanks again.

[jettrue]

.htacces reads:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.yoursite.com$ [NC]
RewriteRule ^(.*)$ http://yoursite.com/$1 [R=301,L]

You didn't actually leave the above as "yoursite.com", right?

I bet if you go to http://bisousbaby.com the menu works, but not if you go to http://www.bisousbaby.com

Fix the .htaccess, and it should force http://bisousbaby.com, then it will work.

[newagekat]

You didn't actually leave the above as "yoursite.com", right?

I bet if you go to http://bisousbaby.com the menu works, but not if you go to http://www.bisousbaby.com

Fix the .htaccess, and it should force http://bisousbaby.com, then it will work.

sorry must have pasted the lines from the readme. Yes, I did check and I did change yoursite.com to the correct domain.

Ok so I figured out the issue was the width in div#dropMenu li is required for IE6 but not for Firefox or IE7. here is my stylesheet if it can relieve someone's headache. NOTE, my template contaains conditional IE divs.

body { behavior: url(includes/csshover.htc); }

/*brown*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover
{
color: #4f4f4f!important;
background: #E0949E;
}

div#dropMenu
{
width: 100%;
height: 40px;
margin: 0 auto;
text-align: left;
z-index: 975;
background: url(/includes/templates/babyboy/images/ribbonPink.jpg) repeat-x left bottom;
position: relative;
font-size: 0.9em;
}

div#ie6only div#dropMenu { height: 53px; }

div#dropMenu ul
{
margin: 0;
padding: 0;
}

div#dropMenu li
{
position: relative;
list-style: none;
margin: 0;
float: left;
line-height: 1em;
}

div#ie6only div#dropMenu li
{
width: 11.167%;
*width: 11.149%;
}

div#dropMenu ul.level1
{
width: 100%;
margin: 0 auto;
text-align: left;
background: #6B5F5A;
/*background color of top menu when NOT selected. */
z-index: 975;
float: left;
}

div#dropMenu li a
{
display: block;
/* Hides from IE5-mac \*/
height: 1%;
/* End hide from IE5-mac */
padding: .7em 1em;
text-decoration: none;
text-transform: uppercase;
color: #E4D7D2;
font-weight: bold;
text-align: left;
}

div#ie6only div#dropMenu li a { height: 23px; }

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

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

div#dropMenu li a.noLine { border: none; }

div#dropMenu>ul a
{
width: auto;
z-index: 975;
}

div#dropMenu ul ul
{
display: none;
background-color: #ffffff;
border: 1px dotted #E1959F;
}

div#dropMenu ul ul li
{
width: 15em;
z-index: 975;
}

div#ie6only div#dropMenu ul ul li { width: 18em; }

/*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: 15em;
display: block;
z-index: 975;
}

div#dropMenu ul.level2
{
background: #FFFFFF;
z-index: 975;
position: absolute;
left: 0;
color: #D66E7B;
}

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: 15em;
background: #FFFFFF;
border: 1px solid #E1959F;
}

div#dropMenu ul.level2 a
{
padding: 0.5em 1.25em;
color: #D66E7B;
font-weight: normal;
background-color: transparent;
text-transform: none;
border-bottom: 1px dotted #F3D5D8;
}

/* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover
{
color: #D66E7B!important;
background-color: #F3D5D8;
}

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

[freeohio]

I have an issue in Firefox 3.06 on my development site. When logged in, the dropdown options below My Account write over top of one another.

My Account/Checkout are the ones. I removed the My Account submenu since it's redundant, and it just bumped the issue down to the next one in the stack.

It only happens after a user has logged on, so I've provided a printscreen.



Thanks in advance if you can help!

[cougar]

Gday
Have just installed CSS dropdown mod.

It works fine in FF but when viewing in IE7 the dropdown menu doesn't display on top layer and displays behind description page.

http://901.com.au/index.php test site to see in action (View in IE 7)

Any help greatly appreciated...

[freeohio]

I have an issue in Firefox 3.06 on my development site. When logged in, the dropdown options below My Account write over top of one another.

I found the problem - it may have been documented earlier. The bolded tag used to be level2.

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li class="submenu"><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
<ul class="level3">
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
</ul>
</li>
<?php } else { ?>
<li><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<?php } ?>