How to make the menu active?

Question

css

The active menu does not work, that is, it does not switch. The active item is always "Cut".

There is a menu:

<aside class="sidebar">
    <ul class="nav nav-list side-menu">
      <li class="active"><a href="/raspil.php">Распил</a></li>
      <li class=" "><a href="/kromka.php">Кромление</a></li>
      <li class=" "><a href="/prisadka.php">Присадка/Сверловка</a></li>
      <li class=" "><a href="/frezerovka.php">Фрезеровка</a></li>
      <li class=" "><a href="/upakovka.php">Упаковка</a></li>
      <li class=" "><a href="#">Фасады</a></li>
    </ul>
  </aside>

css

.side-menu {
  border-bottom: 1px solid #ebeef1;
  overflow: hidden
}

.side-menu li {
  line-height: 16px
}

.side-menu>li>a {
  border-top: 1px solid #ebeef1;
  font-size: 14px;
  position: relative;
  text-decoration: none;
  padding: 11px 27px 13px 13px
}

.side-menu>li>a:focus,
.side-menu>li>a:hover {
  background-color: transparent
}

.side-menu>li:not(.active)>a {
  color: #2f383d
}

.side-menu>li>a:before {
  color: #7b8e9a;
  position: absolute;
  font-family: FontAwesome;
  content: "\f054";
  font-size: 8px;
  right: 12px;
  font-weight: 400;
  top: 12px
}

.side-menu>li.active.child>a:before {
  top: 11px;
  content: "\f078"
}

.bx-firefox .side-menu>li>a:before {
  top: 13px
}

.bx-firefox .side-menu>li>a {
  padding-top: 10px;
  padding-bottom: 14px
}

.side-menu>li.active a:before,
.side-menu>li.active>a {
  color: #fff !important
}

.side-menu .submenu {
  margin: -1px 0 0;
  padding: 8px 13px 15px;
  background-color: #f5f6f7;
  list-style: none;
  font-size: 12px
}

.side-menu .submenu .submenu {
  padding: 0 9px 4px
}

.side-menu .submenu>li {
  margin-bottom: 1px
}

.side-menu .submenu>li:last-child {
  margin: 0
}

.side-menu .submenu>li>a {
  text-decoration: none;
  color: #666;
  display: block;
  padding: 4px 0
}

/* Добавить: */
.side-menu.active a{
  border-bottom: 4px solid white;
}

How to make an active class added to the active item in the menu?