CSS Dropdown menu for the header- With Categories!

Hi Jade. Thanks for a great contribution.

Am I able to have a different coloured font for the submenus when there is a mouse hover over them versus when they are inactive? I.E the background for my menu is white fading to light grey, with dark grey font #666. I use the same background image for the hover in the submenus, which contrasts nicely with the standard submenu background colour #4f4f4f. However, when the submenu items aren't hovered over the background colour and text are too similar and very dark. I was hoping to change the non hovered text from 666 to plain white or very light grey.

URL below.

www.sgtpepper.com.au/store

Brendan

Hi Jade,
Thanks for a great mod! I love it.:smile:
I read through a lot of threads, but I couldnot find a good answer to my question.
I want the top bar of the menu and the dropdown menus to align to the left and right beneath each other.
I managed to fix this in the stylesheet_header_menu.css by adjusting the padding for the #divdropMenu ul to:
padding: 0 0 0 .6em; and the padding for the div#dropMenu li a to:
padding: .6em 0 .6em 1em;
I also changed the width 3 times from 12em to 13.8em. So far so good. Everything aligns to the left and beneath each other.
The only thing is that the hover of the dropdown menus isn't a complete hover. It misses a little bit on the left. I have no idea where I can change that. Can you help me?
Here is my testsite: http://www.jomedio.nl/zencart-menu/i...ain_page=index

Johanna

Ok I have figured it out. I added the text align center to the dropmenu.
For everybody that wants the code.

Change the #divdropmenu ul to:

div#dropMenu ul {
margin:0;
padding: 0 0 0 .2em;
text-align:center;
Change the div#dropMenu li a to:

div#dropMenu li a {
display: block;
/* Hides from IE5-mac \*/
height: 1%;
/* End hide from IE5-mac */
padding: .6em 0 .6em 0.4em;
text-decoration: none;
text-transform:uppercase;
color:#ffffff;
text-align:left;
border-right:1px solid #ffffff;

Change the 12em to 14.2em(3 times)That's it!

Johanna:smile:

I'm relatively new and I don't use an FTP program. Where exactly do I install this? In the /includes folder? Sorry. v_v

~Indi

Scratch that, I figured it out....in order to have different coloured font for my level 1 items (the links people see without hovering) I added the following line to stylesheet_header_menu.css

div#dropMenu ul.level1 a {padding: 0.5em 0 0.5em 0.25em;color: #666; text-transform:none;}

Hi.
I am having problems displaying subcategories. They do not appear in the drop down menu. If you have time please have a look.

Am I missing something simple?

Thank you

http://earthcareoptions.co.uk

Quote:

---

Originally Posted by libralion

Hi Jade,
Thanks for a great mod! I love it.:smile:
I read through a lot of threads, but I couldnot find a good answer to my question.
I want the top bar of the menu and the dropdown menus to align to the left and right beneath each other.
I managed to fix this in the stylesheet_header_menu.css by adjusting the padding for the #divdropMenu ul to:
padding: 0 0 0 .6em; and the padding for the div#dropMenu li a to:
padding: .6em 0 .6em 1em;
I also changed the width 3 times from 12em to 13.8em. So far so good. Everything aligns to the left and beneath each other.
The only thing is that the hover of the dropdown menus isn't a complete hover. It misses a little bit on the left. I have no idea where I can change that. Can you help me?
Here is my testsite: http://www.jomedio.nl/zencart-menu/i...ain_page=index

Johanna

---

Change this section to this:

div#dropMenu ul {
margin:0;
padding: 0;
text-align:center;
}

Then remove this padding:

padding: 0.5em 0 0.5em 0.25em;

Quote:

---

Originally Posted by pfab

Hi.
I am having problems displaying subcategories. They do not appear in the drop down menu. If you have time please have a look.

Am I missing something simple?

Thank you

http://earthcareoptions.co.uk

---

Yes, you're missing something simple. Read the readme.txt! :cool:

Quote:

---

Originally Posted by jettrue

Yes, you're missing something simple. Read the readme.txt! :cool:

---

Hi J

I cant seem to find the problem. I have followed the instructions and have read the read me file so many times that my eyes will need surgical correction.

The simplicity of what I am missing is way beyond me :blink:

Thanks

P

Quote:

---

Originally Posted by pfab

Hi J

I cant seem to find the problem. I have followed the instructions and have read the read me file so many times that my eyes will need surgical correction.

The simplicity of what I am missing is way beyond me :blink:

Thanks

P

---

From the readme (I can tell this is your issue, because your menu works fine in firefox):

Quote:

---

5. For full compatibility with IE browsers prior to IE7, you can add the sample code within the "additions to .htaccess" file to your ROOT folder's .htaccess file (if no file exists, you can create one. NOTE- if you were looking in your root folder, the .htaccess file would belong right above the "admin" folder). For example:

.htaccess <-- .htaccess belongs here
admin
cache
download
editors
email
etc.

FIRST check your includes/configure.php file to see if your website is defined as "http://www.yoursite.com" or "http://yoursite.com". Be sure to change "yoursite" to your actual site name.

If your website is defined as "http://www.yoursite.com" enter this into your root folders .htaccess file:

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

If your website is defined as "http://yoursite.com" enter this into your root folders .htaccess file:

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

---

And be sure to add this to the end of your .htaccess file:

Quote:

---

## the following makes sure the correct mime type is sent for the .htc file

AddType text/x-component .htc

---