如何在浏览器的最小化上制作左右两侧导航栏的子菜单

<div class="left-nav">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

<div class="right-nav">
  <!-- 右侧导航栏内容 -->
</div>

.left-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  background-color: #f1f1f1;
  padding: 20px;
}

.right-nav {
  position: fixed;
  right: 0;
  top: 0;
  width: 200px;
  background-color: #f1f1f1;
  padding: 20px;
}

// 获取菜单项和子菜单元素
var menuItems = document.querySelectorAll('.left-nav li');
var subMenus = document.querySelectorAll('.left-nav li ul');

// 遍历菜单项，为每个菜单项添加事件监听器
menuItems.forEach(function(menuItem) {
  menuItem.addEventListener('mouseover', function() {
    // 显示对应的子菜单
    var subMenu = this.querySelector('ul');
    if (subMenu) {
      subMenu.style.display = 'block';
    }
  });

  menuItem.addEventListener('mouseout', function() {
    // 隐藏对应的子菜单
    var subMenu = this.querySelector('ul');
    if (subMenu) {
      subMenu.style.display = 'none';
    }
  });
});