Question

Resolved Thanks!

I need to apply css to the current active menu (PARENT LIST li item), this is my code:

#supermenu li.current-menu-item a, #supermenu li.current-menu-item a:hover {
      font-weight: bold;
      color: #fff;
      background-color: #ea6ea0;
      border-right: 1px solid #ea6ea0;
      box-shadow:inset 0 -1px 2px #bf1358;
}

Overriding the links for children looking like a long messy process, any clean way to exclude the children links?

but the css get applied to the children LINKS / anchors because it is used in conjuction with dropdown menu, how can I stop the children links from having the same css?

Thanks

Answer 1

If I understand you correctly, please try this:

#supermenu li.current-menu-item > a,
#supermenu li.current-menu-item > a:hover {
      font-weight: bold;
      color: #fff;
      background-color: #ea6ea0;
      border-right: 1px solid #ea6ea0;
      box-shadow:inset 0 -1px 2px #bf1358;
}

You can take a look at this article to understand the > child combinator.

Note that it doesn’t work for IE6 or lower.