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!

peer
  • 1,001
  • 4
  • 13
  • 29
  • 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
  • 5,271
  • 18
  • 36
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
  • 1
  • 5