My HTML code has the following structure:
<ul id="urlcss">
<li class="nav-submenu">
<a class="collapsed" href="#" data-toggle="collapse" data-target="#submenu0">
ADMIN
</a>
<div class="collapse" id="submenu0" aria-expanded="false">
// Some menus check the image below
</div>
</li>
</ul>
When viewed in a browser, it appears like this:
https://i.sstatic.net/LtXvL.png
The collapsed menu is shown like this:
https://i.sstatic.net/kqp6S.png
I am trying to add an arrow and change the background color when a user clicks on the li with nav-submenu class. I attempted using CSS but no changes occurred. This is what I want (Look at the arrow):
https://i.sstatic.net/AU4Nl.png
I tried adding this code snippet to create a holder-like effect, but it did not work:
.nav-submenu[data-toggle].collapsed:after {
content: " ▾";
}
.nav-submenu[data-toggle]:not(.collapsed):after {
content: " ▴";
}