How to style the selected category menu item?

Question

I would like to highlight the selected category menu item. The item has the class .qa-nav-cat-selected. This was no problem with version 1.3 but now I am using sub-categories as in version 1.4. The issue is that the selected sub-category and its parent category have both the same style. Do you have a solution to style only the selected category and no parent categories?

Answer 1

Since each level of navigation is surrounded by a qa-nav-cat-list-X class (where X is a number), you can use a nested CSS selector, e.g.

.qa-nav-cat-list-1 .qa-nav-cat-selected { ... }

Comments

ok, then you can manage the behavior of the sub-categories only. However, when only a main category is open and shall be marked, then you would need to add also .qa-nav-cat-list .qa-nav-cat-selected. When you open a sub-category, the class then applies to both the parent and sub-category. How can this be solved?

---

One option is to use a CSS selector for immediate child, e.g.:

.qa-nav-cat-list>.qa-nav-cat-selected {...}

But this won't work in IE6. The other option is to override the styling changes in a second selector which is specific to the sub-category.