Keep Hover Effect on Top-Level Parent

Last updated January 25, 2010. Created by ryanblyth on January 25, 2010.
Log in to edit this page.

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;
}