Define background color for individual parent nice menu items with CSS
michaelbstringer - November 3, 2009 - 23:05
| Project: | Nice Menus |
| Version: | 6.x-1.3 |
| Component: | CSS |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Description
I am running Drupal 6 with Nice Menus and customizing a Zen theme. As such, I would really like to define different background colors for each of the menu items across the screen, with a uniform color for the drop-down menu below the menu.
I am having a hard time coming up with the proper syntax for the CSS code to be able to accomplish this.
In my custom CSS file (as defined in under themes>global settings), there is this:
ul.nice-menu-down li.menuparent,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menuparent {
background: #eee url(arrow-down.png) right center no-repeat;
}But I cannot get the syntax right to name each .menuparent by its ID number.
Anybody have more knowledge than me on CSS?
Thanks!
#1
OK, I got it. In my custom menu CSS file that I renamed, moved, and then listed the path in my theme global settings, I added the following classes:
/* no change for this first element – it is just given to show where I placed this */
ul.nice-menu-down li.menuparent,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menuparent {
background: #eee url(arrow-down.png) right center no-repeat;
}
/* In firebug, I grabbed these menu-path-node-#’s for each of the links */
ul.nice-menu-down li.menu-path-node-47,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menu-path-node-47 {
background: orange;
}
ul.nice-menu-down li.menu-path-node-203,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menu-path-node-203 {
background: green;
}
ul.nice-menu-down li.menu-path-node-350,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menu-path-node-350 {
background: red;
}
The individual links are styled based on the node that they point to.
#2
Automatically closed -- issue fixed for 2 weeks with no activity.