[UI] 헤더 nav 언더라인 따라다니기

let bar = document.querySelector('span');
let menu = document.querySelectorAll('a');
for(let i=0; i<menu.length; i++){
  menu[i].addEventListener('mouseenter',function(e){
    let pos = e.currentTarget.offsetLeft;
    bar.style.opacity = "1";
    bar.style.left = pos + "px"
  })
}
document.querySelector('div').addEventListener('mouseleave',function(e){
	bar.style.opacity = "0";
});

 

 

<div>
  <a href="#">메뉴1</a>
  <a href="#">메뉴2</a>
  <a href="#">메뉴3</a>
  <a href="#">메뉴4</a>
  <span></span>
</div>

 

 

마우스 움직일때마다 언더라인 따라다니게..