I don't know if this is a problem in CSS or Angular...

If I click on a list in my menu, for example "market"

first - img

If my mouse is pointed elsewhere, the background color disappears. I would like it to be maintained on the page consulted.

second - img

admin.component.html

<div class="sidebar">
  <div class="logo-details">
    <i class="bx bxl-c-plus-plus"></i>
    <span class="logo_name">Menu</span>
  </div>
  <ul class="nav-links">
    <li>
      <a routerLink="market" (click)="DisplaySubMenu()">
        <i class="bx bx-grid-alt"></i>
        <span class="links_name">Market</span>
      </a>
    </li>

    <li>
      <a routerLink="currency">
        <i class="bx bx-box"></i>
        <span class="links_name">Currency</span>
      </a>
    </li>
  </ul>
</div>
<section class="home-section">
  <nav>
    <div class="sidebar-button">
      <i class="bx bx-menu sidebarBtn"></i>
      <span class="dashboard">Dashboard</span>
    </div>
  </nav>
  <router-outlet></router-outlet>
</section>

admin.component.css

.sidebar .nav-links {
  padding: 0;
}

.sidebar .nav-links li {
  position: relative;
  list-style: none;
  height: 50px;
}

.sidebar .nav-links li a {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
}

.sidebar .nav-links li a:hover {
  background: #081d45;
}

.sidebar .nav-links li i {
  min-width: 60px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.sidebar .nav-links li a .links_name {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  text-transform: uppercase;
}

The code is available here

CodePudding user response：

one way is to add router link active [routerLinkActive]="['yourClass']" to your <a> element and choose a css class to apply

  <a
    routerLink="currency"
    (click)="DisplaySubMenu(); selectedTab = 'currency'"
    [routerLinkActive]="['selected']"
    >Currency
  </a>

in css add the expected design to selected class

.sidebar .nav-links li a:hover, .selected {
  background: #081d45;
}