I have the following nested list (I omit the other first level li’s for convenience):
<ul> <li class="collapsible active"> <i class="fas"></i><a href="#">item 1 </a> <ul class="collapsible__content"> <li><a href="#"> item 2 </a></li> <li><a href="#"> item 3 </a></li> </ul> </li> </ul>
I want item 1 to have a different background color when its container li element is active, but I don’t want the other nested li elements to have the same color when they are expanded. I tried to set a different background color for the class "collapsible__content" and overwrite it in response of the hover effect. However, the very outside margin cannot be wiped out.
And a related question would be to highlight only the nested li element, as it should always have that annoying margin.