<nav>
                <div id="marker"></div>
                <ul class="menu">
                    <li><a href="#">Главна</a></li>
                    <li><a href="#">Услуги</a></li>
                    <li class="active"><a href="#">О нас</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </nav>

 nav{
            position: relative;
            .menu{
                display: flex;
                li{
                    list-style: none;
                    margin-right: 23px;
                    &:last-child{
                        margin-right: 0;
                    }
                    a{
                        padding: 0px 7px;
                        font-size: 16px;
                        line-height: 22px;
                        color: #687A95;
                        text-decoration: none;
                    }
                }
            }
            #marker{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0px;
                height: 2px;
                background-color: red;
                transition: all .7s;
            }
        }

const marker = document.querySelector('#marker');
const ul = document.querySelector('.menu');
let timeout = null;
let active = document.querySelector('li.active');

function toActive() {
  marker.style.width = getComputedStyle(active).width;
  marker.style.left = active.offsetLeft+'px';
}

toActive();

ul.addEventListener('mouseleave', () => {
  clearTimeout(timeout)
  timeout = setTimeout( toActive, 500)
})

function indicator(e){
    marker.style.left = e.offsetLeft+'px';
    marker.style.width = e.offsetWidth+'px';
  // console.log(marker.style.left);
}

ul.addEventListener('mousemove', (e) =>{
  clearTimeout(timeout);
  if(!e.target.closest('li')) return;
  indicator(e.target);
})