[Помогите] с меню

как мне сделать в таком меню
active
???

Код:

<div id="nav">
        <ul>
        <li><a href="#page-one">О нас</a></li>
        <li><a href="#page-two">Портфолио</a></li>
        <li><a href="#page-three">Услуги</a></li>
        <li><a href="#page-four">Контакты</a></li>
        </ul>
        </div>

сайт одностраничник


нужно
щоб при наведенні на <div id="page-one">

Hover Ставал активний

 

Добавь скрипт (скрипт должен быть подключен в конце страницы, например перед закрывающим тегом </body>)

function addActiveClass(){
this.classList.toggle('active');
}
document.querySelector('#page-one').addEventListener('mouseenter', addActiveClass );
document.querySelector('#page-one').addEventListener('mouseleave', addActiveClass );

 

добавил
не работает(

 

а зачем это нужно на лендинге? разве что при скроллинге меню. Если так то не правильно поставлена задача. Опишите подробнее