CSS Dropdown menu for the header- With Categories!

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

[yelow]

Hey jettrue, I've another question for you.

I've been breaking my head trying to figure out who wrote that flyout menu addon, and I kept searching flyout and getting another one.

Now, my memory has finally come back to me, I remember reading this thread when I was configuring the menu.

I've moved servers, and it doesn't work as-is. I always expect things to break, so the old site is still running, I haven't switched the DNS over yet.

The new static address is 77.68.43.14 and as you can see, the menu is not working.

I am hoping that you can take one look at it and go "Oh! Of course, that's just the #### that needs to be #####."

Otherwise, I'm looking at remodifying the classic template into http://store.persite.com - most of which I cannot remember how I did.

So yea, lemme know if you know what's the issue. It definitely only seems to happen if I put the header_tpl files into place.

-Tim

[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 } ?>

[jettrue]

Hey jettrue, I've another question for you.

I've been breaking my head trying to figure out who wrote that flyout menu addon, and I kept searching flyout and getting another one.

Now, my memory has finally come back to me, I remember reading this thread when I was configuring the menu.

I've moved servers, and it doesn't work as-is. I always expect things to break, so the old site is still running, I haven't switched the DNS over yet.

The new static address is 77.68.43.14 and as you can see, the menu is not working.

I am hoping that you can take one look at it and go "Oh! Of course, that's just the #### that needs to be #####."

Otherwise, I'm looking at remodifying the classic template into http://store.persite.com - most of which I cannot remember how I did.

So yea, lemme know if you know what's the issue. It definitely only seems to happen if I put the header_tpl files into place.

-Tim

It's working for me in Camino and Firefox. Where is it not working for you? If its only in IE6, did you follow the .htaccess instructions?

[jettrue]

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

Have you tried giving the menu a higher z-index than the content?

[cougar]

Have you tried giving the menu a higher z-index than the content?

Gday jettrue

Thanks for the response, could you point in the right direction where this might be done...

Cheers

[SalonRoyalty]

I've decided to go another direction in my site design. How do I properly uninstall this mod. Directions were not included in the readme.txt