将菜单栏添加到网格窗格

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

.menu {
  background-color: #f2f2f2;
  padding: 10px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin-right: 10px;
}

.menu li a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

.menu li a:hover {
  background-color: #ccc;
}

// 示例代码，仅作为演示
var menuItems = document.querySelectorAll('.menu li');

menuItems.forEach(function(item) {
  item.addEventListener('mouseover', function() {
    // 显示子菜单
    // ...
  });

  item.addEventListener('mouseout', function() {
    // 隐藏子菜单
    // ...
  });

  item.addEventListener('click', function() {
    // 跳转到相应页面
    // ...
  });
});