Keep Hover Effect on Top-Level Parent

Last updated on
30 April 2025

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

Page status: Not set

You can: