ルーティング、アクティブリンクの背景色の変更を行う

Question

私はこのようなサイドバーがあります：私はFirstOption、FirstOptionの変化の背景色をクリックすると、表示することを、それをI作るにはどうすればよい

 <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home" ><li class="nav-item side"> 
      <a class="nav-link" href routerLinkActive="active" routerLink="">Home <span class="sr-only">(current)</span></a> 
     </li>    
     <ul class="sub-menu collapse" id="home"> 

       <li class="nav-item list-unstyled"><a class="nav-link" href routerLink="home/submenu-1">Submenu1</a></li> 
       <li class="nav-item list-unstyled"><a class="nav-link" href routerLink="home/submenu-2">Submenu2/a></li> 
      </ul> 
     <li class="nav-item side"> 
      <a class="nav-link" routerLink="firstOption">First Option</a> 
     </li> 
     <li class="nav-item side"> 
      <a class="nav-link"href routerLinkActive="active" routerLink="history">Second Option</a> 
     </li> 

をそれがアクティブであること。 オプションをナビゲートできるので、リストがアクティブなときに背景色を変更できません。 また、サブメニュー1またはサブメニュー2を開いたときに、最初の家のサブメニューを開いたままにします。

ありがとうございます。すべての削除属性「HREF」の

Answer 1

使用この背景色のドロップダウン・メニューを変更する

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { 
    color: #fff; 
    text-decoration: none; 
    background-color: #00a65a; 
    outline: 0; 
}