编写一个菜单，使用div等工具，要求：\n\n横向菜单\n\n有二级菜单\n\n点击菜单项要有响应（alert或者使用iframe显示网页等行为）

好的，以下是一个简单的横向菜单，包含二级菜单，点击菜单项会弹出一个提示框：

<div class="menu">
  <div class="menu-item" onclick="alert('你点击了菜单1')">菜单1</div>
  <div class="menu-item has-submenu">
    菜单2
    <div class="submenu">
      <div class="submenu-item" onclick="alert('你点击了菜单2-1')">菜单2-1</div>
      <div class="submenu-item" onclick="alert('你点击了菜单2-2')">菜单2-2</div>
    </div>
  </div>
  <div class="menu-item" onclick="alert('你点击了菜单3')">菜单3</div>
</div>

CSS样式：

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  padding: 10px;
}

.menu-item {
  cursor: pointer;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

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

.has-submenu {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  display: none;
}

.has-submenu:hover .submenu {
  display: block;
}

.submenu-item {
  cursor: pointer;
  padding: 5px;
  transition: background-color 0.2s ease;
}

.submenu-item:hover {
  background-color: #ddd;
}

解释一下：

- 使用`flex`布局实现横向菜单，`justify-content: space-between`让菜单项之间的间距均匀分布。
- `menu-item`类表示菜单项，`has-submenu`类表示有二级菜单，`submenu`类表示二级菜单。
- `position: relative`和`position: absolute`实现二级菜单的定位，`top: 100%`让二级菜单显示在菜单项下方。
- `display: none`和`display: block`实现二级菜单的显示和隐藏。
- `cursor: pointer`让鼠标移动到菜单项上时显示手型，表示可以点击。
- `transition`实现菜单项和二级菜单的渐变效果。
- `border-radius`和`box-shadow`实现菜单项和二级菜单的圆角和阴影效果。

点击菜单项时会弹出一个提示框，可以使用`alert`函数实现。如果要使用`iframe`显示网页，可以在点击菜单项时动态创建一个`iframe`元素，设置其`src`属性为要显示的网页地址，然后将其添加到页面中。