使用jQuery创建菜单

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<ul id="menu">
  <li>菜单项1</li>
  <li>菜单项2
    <ul>
      <li>子菜单项1</li>
      <li>子菜单项2</li>
    </ul>
  </li>
  <li>菜单项3</li>
</ul>

$(document).ready(function() {
  // 选中菜单项
  $('#menu li').click(function() {
    // 切换子菜单的显示/隐藏状态
    $(this).children('ul').toggle();
  });
});

#menu {
  list-style: none;
  padding: 0;
}

#menu li {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
}

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

#menu ul {
  display: none;
  list-style: none;
  padding: 0;
}

#menu ul li {
  background-color: #fff;
  padding: 5px;
}