如何实现鼠标悬停在菜单项上时自动显示其二级子菜单功能？

实现鼠标悬停在菜单项上自动显示二级子菜单的功能，通常需要结合HTML、CSS和JavaScript。这里有一个简单的例子：

HTML部分：

<ul class="nav">
  <li><a href="#" class="parent">主菜单</a>
    <ul class="submenu" style="display: none;">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
    </ul>
  </li>
</ul>

CSS部分：

.nav ul.submenu {
  position: absolute;
  display: block; /* 初始状态隐藏 */
  background-color: #f9f9f9;
}

.nav li:hover > .submenu {
  display: block; /* 鼠标悬停时显示子菜单 */
}

JavaScript (非必需，仅用于优化用户体验)：

document.querySelectorAll('.parent').forEach(function(item) {
  item.addEventListener('mouseenter', function() {
    this.querySelector('.submenu').style.display = 'block';
  });
  item.addEventListener('mouseleave', function() {
    this.querySelector('.submenu').style.display = 'none';
  });
});

在这个例子中，当鼠标悬停在`<a>`标签（父菜单项）上时，对应的`.submenu`会显示；当鼠标离开时，`.submenu`又会被隐藏。