Keep Hover Effect on Top-Level Parent
How to Modify Nice Menu CSS so that the parent link retains the hover state.
1. Make the following changes to the parent menu item :hover CSS.
a. Add a directional class (i.e., ul.nice-menu-down or nice-menu-right)
b. Add a menuparent:hover state
c. Add an over class
ul.nice-menu li a:hover,
ul.nice-menu-down li.menuparent:hover a,
ul.nice-menu-down li.over a {
background: url(images/nav_bg_menuparent.png) repeat-x bottom;
color: #fbfbfb;
}
2. Make the following changes to the child menu item CSS.
a. Add the container block id to make it more specific than any other CSS (This probably isn'y necessary, but is still a good idea.)
b. Add a directional class (i.e., ul.nice-menu-down or ul.nice-menu-right)
c. Add a menuparent class
d. Add the child ul and li (The ul probably isn't necessary, but doesn't hurt either.
#block-nice_menus-1 ul.nice-menu-down .menuparent ul li a {
background: #1966a3;
color: #fbfbfb;
border-right: none;
width: 200px;
}
3. Make the following changes listed in step 2 to the child menu hover CSS as well (if there is a hover state.)
#block-nice_menus-1 ul.nice-menu-down .menuparent ul li a:hover {
background: #023863;
}
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion