Targeting nested menu active state

hi,
i have a nested drop down menu which has sub menu, like when u hover over menu the sub menu drop down. i want to target its active and hover state to different color. how can i achieve that?

Hi,

We’d need to see what code you are using and your question is a little unclear but if you want to highlight the top hovered menu item and keep it alight while traversing the submenu you would usually target it when the list is hovered rather than the anchor.

e.g.

#nav li:hover > a{background:red}
#nav li:hover ul {show menu etc…}

(not ie6 compatible)

here is the link when u rollover portfolio, u will see drop down. i wanna make there active and hover state like rest of them. i dont know how to target them

Off Topic:

how u been paul, its been yrs since i heard from u on fourms. hope everything is well?

Hi,

You are using a JS menu that constructs the submenu and just places it under the nav. It is a separate element and not nested and has its own css. You won’t be able to keep the top menu alight but you can style the submenu using the code you were provided with.

e.g.


#wsite-menus .wsite-menu li a:hover{color:#E4287C}

It is not a very semantic way to have navigation as its best to use the nested list approach and have the menus available in the html and not added by JS. Something like the suckerfish menus or Jasons overflow method. You’d then layer any added functionality on with JS as required but the menu works fine without JS.

The div around your UL is also unnecessary as it serves no purpose and indeed just adds to the code and longer paths in the css.

Off Topic:

I’m fine thanks but busy at the moment so not around here 24/7 as usual :slight_smile:

Thanks paul!