0

I have a navigation bar with several levels. Now I'm trying to make it possible to have the parent of a li to be active when the li itself is active as well.

What I've got: https://gyazo.com/32f1191aeaf1ec3ef312de2a029eddda

As you can see, the relations tab is now active. So what I want is the office tab to have the same red color as well (just an example).

I hope there's a CSS only solution, since I know there's a solution for the hover state (li:hover > a). I'm using a clickable menu by the way, that's why I'm adding .active classes to the clicked li.

The active li would be something like: ul li ul li.active a { color: red }.

Thanks in advance!

Peurr
  • 925
  • 3
  • 12
  • 27
  • 1
    Why not add `.active` to the parent `li`, and then make the child elements inherit the styles? – Vucko Apr 04 '16 at 13:17
  • As Vucko said, this could be a CSS-only approach, and as Animatio said, you cannot select up the DOM, to do such magic you'll need JavaScript. – Clemens Himmer Apr 04 '16 at 13:26

2 Answers2

1

Css doesn't have parent selector. You can't do this. Use js.

3rdthemagical
  • 4,687
  • 13
  • 30
1

In CSS it's only possible set rules in parent > child direction. But not child > parent. In current case you can set handlers for clicks on parent and child in order to add/remove active classes. But you have to use JavaScript for that.

Animatio Animatio
  • 36
  • 4