<nav>
                <div id="marker"></div>
                <ul class="menu">
                    <li><a href="#">Главна</a></li>
                    <li  class="arrow"><a href="#">Услуги
                      <ul>
                            <li><a href="#">Под меню</a></li>
                            <li><a href="#">Под меню                          </a></li>
                            <li><a href="#">Под меню</a></li>
                            
                        </ul>
                      
                      </a></li>
                    <li><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;
                    }
                    &.arrow{
                        position: relative;
                        padding-right: 10px;
                        &:before{
                            position: absolute;
                            content: url(../images/icons/arrow.svg);
                            right: 5px;
                            top: 3px;
                            transform: rotate(-90deg);
                            transition: all ease-in-out .4s;
                        }
                        &:hover{
                            &:before{
                                transform: rotate(0deg);
                                top: 1px;
                            }
                            ul{
                                opacity: 1;
                                visibility: visible;
                                transform: translateY(0px);
                            }
                        }
                       
                    }
                    a{
                        padding: 0px 7px;
                        font-size: 16px;
                        line-height: 22px;
                        color: #687A95;
                        
                    }
                    ul{
                        margin-top: 6px;
                        position: absolute;
                        background: #FFFFFF;
                        box-shadow: 0px 10px 20px rgba(41, 50, 65, 0.2);
                        border-radius: 5px;
                        z-index: 10;
                        padding: 19px 20px 21px 20px;
                        width: 270px;
                        opacity: 0;
                        visibility: hidden;
                        transition: all ease-in-out .4s;
                        transform: translateY(-15px);
                        li{
                            padding-left: 18px;
                            padding-bottom: 6.25px;
                            border-bottom: 0.5px solid rgba(125, 145, 173, .3);
                            margin-right: 0px !important;
                            padding-top: 8px;
                            transition: all ease-in-out .3s;
                            &:hover{
                                background-color: rgba(125, 145, 173, .3);
                            }
                            &:first-child{
                                padding-top: 10px;
                                
                            }
                            &:last-child{
                                padding-bottom: 10px;
                                border-bottom: none;
                            }
                            a{
                                padding: 0;
                                
                                padding-right: 5px;
                                line-height: 20px;
                                color: #687A95;
                            }
                        }
                    }
                   
                }
            }
            #marker{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0px;
                height: 2px;
                background-color: red;
                transition: all 1s;
            }
        }

const marker = document.querySelector('#marker');
const item = document.querySelectorAll('nav .menu li');

function someInit() {
  for (var i=0; i<item.length; i++){
    if (item[i].classList.contains('active')){
    marker.style.left = document.querySelectorAll('nav .menu li')[i].offsetLeft+'px';
    marker.style.width = getComputedStyle(document.querySelectorAll('nav .menu li')[i]).width;
    }
  }
}
someInit();

document.querySelectorAll('.menu')[0].addEventListener('mouseleave', () =>{
  marker.style.width = '0px'; 
  someInit();
   
})

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

item.forEach(link =>{
    link.addEventListener('mousemove', (e) =>{
        indicator(e.target);
    })
})