CSS Dropdown menu for the header- With Categories!

[Ravyn]

Find this in your stylesheet:

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

Change the colour to suit.

That was what my first thought was as well, however it doesn't seem to create the desired effect.

Here's my css for the drop down menu:

button4.png = The Top Level Category Buttons when not active.
button4down.png = The Top Level Category Buttons when you mouseover them.
button3.gif = The background for the submenu as you scroll through it.

I'm trying to get the top level category to stay highlighted (showing button4down.png) as long as the user is scrolling through that particular categories submenu.

body {  
    behavior: url(includes/csshover.htc);
    }
    
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*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: url(../images/button4down.png) 95% 50% no-repeat;}
 

/*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%;
    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:#494949; /*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: 0.6em 0; 
    text-decoration: none; 
    text-transform:uppercase; 
    color:#ffffff; 
    text-align:center; 
    /*border-right:1px solid #FF00C0; */
    background: url(../images/button4.png) 95% 50% no-repeat;
    }    
    
div#dropMenu li:hover {background: url(../images/button4down.png) 95% 50% no-repeat;}        
div#dropMenu li.submenu {} 
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:100%;z-index:1000;}
div#dropMenu li.submenu li.submenu {} 
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;left: 3px; width: 127px;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: #000000; text-transform:none; background: #FFFFFF;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f; background: url(../images/button3.gif) 95% 50% no-repeat;}

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

[denbradshaw]

I'm trying to get this up and running on my site, using ZenCart 1.3.9d

Rather than a drop-down menu, I'm just getting an expanded tree of links... Something's broken, but I'm not sure what or where. I'm not seeing any errors, and I checked with firefox and at least see some of the CSS code for the menu.

http://hammockgear.com/cart/

Any help would be greatly appreciated. It's probably just some rookie mistake, but I can't seem to narrow it down!

Thanks

[denbradshaw]

OK, Nevermind... I figured it out. thanks anyway!

[Rich219]

How can I change the background color of this navbar?

[first trading]

How can I change the background color of this navbar?

Find this in the stylesheet_header_menu.css

div#dropMenu ul.level1 {
background-color: #4f4f4f;
}

Change colour to suit.

[first trading]

Hey all,

Love this addon, and I've got a pretty good grip on how to mod it to my liking, however I'm having one slight problem that I'd like to fix if possible.

When you highlight a Top Level Categiry in the Drop down menu, and the submenus appear, you can set it so that a different color appears using :hover

I want to make it so that the Top Level Category color remains the same as it is when you hover over it, while that specific drop down submenu is open.

Hopefully I explained that well enough,
Any questions to help clear what I'm looking for up, let me know.

Appreciate any and all ideas for this.

Cheers,
Ravyn

I have this working on a test site and it should work for you also.

div#dropMenu ul.level1 li:hover {
background-image:url(../images/YOUR_IMAGE.gif);
background-position: top center;
background-repeat: no-repeat;
}

div#dropMenu ul.level1 li:hover ul.level2 li:hover {
background:none;
}

Put both in your stylesheet.

[Ravyn]

I have this working on a test site and it should work for you also.

div#dropMenu ul.level1 li:hover {
background-image:url(../images/YOUR_IMAGE.gif);
background-position: top center;
background-repeat: no-repeat;
}

div#dropMenu ul.level1 li:hover ul.level2 li:hover {
background:none;
}

Put both in your stylesheet.

Great, I have to run off to work right now, but i'll test it as soon as I get home later this evening and let you know how it works out.

Really appreciate the support.

Cheers,
Ravyn

[Ravyn]

Just got in and tried the fix, but still not having any luck. The fix is currently active on the site I sent you the link to in PM if you want to see it live.

This is my current php file:

body {  
    behavior: url(includes/csshover.htc);
    }
    
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*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: url(../images/button4down.png) 95% 50% no-repeat;}
 

/*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 ul.level1 li:hover {
background-image:url(../images/button4down.gif);
background-position: top center;
background-repeat: no-repeat;
}

div#dropMenu ul.level1 li:hover ul.level2 li:hover {
background:none;
}
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:#494949; /*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: 0.6em 0; 
    text-decoration: none; 
    text-transform:uppercase; 
    color:#ffffff; 
    text-align:center; 
    /*border-right:1px solid #FF00C0; */
    background: url(../images/button4.png) 95% 50% no-repeat;
    }    
    
div#dropMenu li:hover {background: url(../images/button4down.png) 95% 50% no-repeat;}        
div#dropMenu li.submenu {} 
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:100%;z-index:1000;}
div#dropMenu li.submenu li.submenu {} 
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;left: 3px; width: 127px;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: #000000; text-transform:none; background: #FFFFFF;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f; background: url(../images/button3.gif) 95% 50% no-repeat;}

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

[MortalWombat]

Hi

I installed this menu on my site a little while ago and it was working fine, but I have only just realised that there are a couple of issues, mostly with IE.

I'm not sure what I added/changed to cause this problem, but, from memory, the menu files are unaltered.

On IE, none of the sub-menus drop out - only the top levels work.
On Firefox, the only problem is that the categories menu isn't functioning.

Also, I don't think this has anything to do with the menu, but on IE the side column drops below the main pages content.

You can see my site here: http://www.mortalwombat.com.au/shop/

Thanks in advance and I look forward to hearing back.

- Tija

[fw541c]

Was trying to change the images that this uses. followed a post to replied to someone else but it didnt work. you mind giving a quick walkthrough? i would appreciate it.