HTML/CSS:菜单内的子菜单。其中一个按钮应触发与主菜单类似的事件

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

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

.menu li {
  position: relative;
}

.menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.menu li:hover > ul {
  display: block;
}

.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
  background: #f0f0f0;
}

.menu ul ul {
  top: 0;
  left: 100%;
}