如何在html中将焦点环添加到菜单项

<ul>
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</ul>

li:focus {
  outline: 2px solid blue;
}

const menuItems = document.querySelectorAll('li');

menuItems.forEach((item, index) => {
  item.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowUp') {
      event.preventDefault();
      if (index > 0) {
        menuItems[index - 1].focus();
      }
    } else if (event.key === 'ArrowDown') {
      event.preventDefault();
      if (index < menuItems.length - 1) {
        menuItems[index + 1].focus();
      }
    }
  });
});