如何创建类似于Gedit中打开菜单的菜单？

<div class="menu">
  <ul>
    <li>文件
      <ul>
        <li>新建</li>
        <li>打开</li>
        <li>保存</li>
      </ul>
    </li>
    <li>编辑
      <ul>
        <li>复制</li>
        <li>粘贴</li>
        <li>剪切</li>
      </ul>
    </li>
    <li>帮助
      <ul>
        <li>关于</li>
        <li>帮助文档</li>
      </ul>
    </li>
  </ul>
</div>

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

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

.menu li {
  position: relative;
  display: inline-block;
  padding: 5px;
  cursor: pointer;
}

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

.menu ul ul {
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 5px;
}

.menu li:hover > ul {
  display: block;
  left: 100%;
  top: 0;
}

// 可以使用jQuery等库简化DOM操作
var menuItems = document.querySelectorAll('.menu li');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('mouseover', function() {
    this.querySelector('ul').style.display = 'block';
  });

  menuItems[i].addEventListener('mouseout', function() {
    this.querySelector('ul').style.display = 'none';
  });
}