phpweb产品二级菜单

<!-- HTML结构 -->
<ul class="menu">
  <li class="menu-item">
    主菜单项1
    <ul class="submenu">
      <li class="submenu-item">子菜单项1</li>
      <li class="submenu-item">子菜单项2</li>
    </ul>
  </li>
  <!-- 其他主菜单项 -->
</ul>

<!-- CSS样式 -->
<style>
.menu .submenu {
  display: none;
}
.menu-item:hover .submenu {
  display: block;
}
</style>

<!-- JavaScript脚本（可选，用于增强交互效果） -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu-item');
  menuItems.forEach(item => {
    item.addEventListener('mouseenter', function() {
      this.querySelector('.submenu').style.display = 'block';
    });
    item.addEventListener('mouseleave', function() {
      this.querySelector('.submenu').style.display = 'none';
    });
  });
});
</script>