Hover parent when the child hover is active?


I need the main menu item to remain highlighted when i hover to the subb item. Can anyone help with this.

make the sub menu a child of the main menu Item, so when you are in the submenue, you are still in the main menu Item

Off Topic:

looks realy nice, but not easely assessable

how do you make it a child of the main item. Thanks

Your highlighting strategy is wrong. In your code you are highlighting he item on anchor (a tag)

you should change all those rules to highlight on LI:hover A,

#topnav > UL > LI : HOVER A {highlight rules}
#topnav > UL > LI >UL LI: HOVER A {highlight rules}

actually I am not even sure why you need the div around the first UL… you should consider optimizing that.

Also if you need to support IE6, you will need to add some js that acts as the LI:hover (as IE6 just doesnt do that)

and instead of using the graceful “>” child selector, add classes to each ul

#topnav .firstlev LI : HOVER A {highlight rules}
#topnav .seclev LI : HOVER A {highlight rules}
#topnav .firstlev .seclev LI A {OFF rules}
#topnav .thrdlev LI : HOVER A {highlight rules}
#topnav .seclev .thrd LI A {OFF rules}

hope that helps :

I’ve used Whatever:hover

Use version 3.00.081222, as the newest one doesn’t seem to work properly.

thank you…I am trying to follow your suggestions

can i add the function of stylistic change the onmouseover event to happen in the submenu to change the menu style required?

You can’t directly affect a parent by doing something on a child with CSS… you could with Javascript.

The only reason the main top-level anchor remains highlighted as you go into the submenu is with
#topnav li:hover>a -type code, you’re saying “highlight the first anchor child of this li” and even while you’re inside a submenu, that’s all still inside that parent li element.

But you won’t be able to do
“if I’m hovering on #topnav ul a” (an anchor in one of the submenus) “make #topnav purple”.

CSS events on the child “a” can’t affect the ancestor ul “topnav”.