如何在悬停菜单时显示描述？

<ul>
  <li data-description="这是菜单项1的描述">菜单项1</li>
  <li data-description="这是菜单项2的描述">菜单项2</li>
  <li data-description="这是菜单项3的描述">菜单项3</li>
</ul>

ul li {
  position: relative;
}

ul li::after {
  content: attr(data-description);
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 5px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
}

ul li:hover::after {
  display: block;
}

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

menuItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    const description = item.getAttribute('data-description');
    item.setAttribute('data-description', '新的描述内容');
  });

  item.addEventListener('mouseout', () => {
    item.setAttribute('data-description', description);
  });
});