如何突出显示当前css中的点击菜单项？

Question

这是我的菜单显示文件，我只需要突出显示当前可点击的菜单项。当前活动的班级项目突出显示

<div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
            <li style="margin-left:20px;">

            </li>
            <li><a href="#"> @ {{ Auth::user()->name }}</a></li>
            <li class="active"><a href="#">PREGO<span class="sr-only">(current)</span></a></li>
            <li><a href="#">Edit Account</a></li>
            <li><a href="{{ route('projects.index') }}">Projects</a></li>
            <li><a href="{{ route('collaborators.form', $project)}}">Collaborators</a></li>
            <li><a href="#">Todos</a></li>
        </ul>
        <ul class="nav nav-sidebar">
            <li class=""><a href="">Account</a></li>
            <li class=""><a href="">Help</a></li>

        </ul>
    </div>

怎么办呢？

Answer 1

.active a {
  color: red;
}

<div class="col-sm-2">
  <ul>
    <li class="active"><a href="Home.html">Home</a></li>
    <li><a href="About.html">About</a></li>
    <li><a href="Contact.html">Contact us</a></li>
  </ul>
</div>