在KeyUP上导航ul列表项

Question

我使用ul li创建了一个菜单。我想允许用户使用向下箭头向上和向上导航在此菜单中导航。有没有办法在不使用jquery的情况下执行此操作？ 我尝试了这个，但它对我不起作用：

 function scrollList() {
  const list = document.getElementById('list');
  const first = list.firstChild;
  const input = document.getElementById('input');
  if (document.activeElement === input) {
    input.blur();
    first.focus();
    first.style.fontSize = 'large';
  } else {
    document.activeElement.nextSibling.focus();
  }
}

// I called this function like this: 

if (e.which == 40) {
  scrollList();
}

<ul>
  <li id='li'>Item 1</li>
  <li id='li'>Item 2</li>
  <li id='li'>Item 3</li>
</ul>  

问题是当我把焦点放在anther元素上时，document.activeElement会返回body。

谢谢