代码实现

好的，以下是一个简单的实现示例，您可以参考：

HTML代码：

<button id="menu-btn">菜单</button>
<div id="menu" style="display:none">
  <ul>
    <li>男歌手</li>
    <li>女歌手</li>
    <li>组合</li>
  </ul>
</div>
<div id="sub-menu" style="display:none">
  <ul>
    <li id="tfboys">TFBOYS</li>
    <li id="snh48">SNH48</li>
    <li id="gnz48">GNZ48</li>
  </ul>
</div>

CSS代码：

#menu {
  position: absolute;
  top: 30px;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
}

#sub-menu {
  position: absolute;
  top: 30px;
  left: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
}

JavaScript代码：

// 获取菜单按钮和菜单元素
const menuBtn = document.getElementById('menu-btn');
const menu = document.getElementById('menu');

// 获取子菜单元素和子菜单项元素
const subMenu = document.getElementById('sub-menu');
const tfboys = document.getElementById('tfboys');
const snh48 = document.getElementById('snh48');
const gnz48 = document.getElementById('gnz48');

// 点击菜单按钮时显示菜单
menuBtn.addEventListener('click', function() {
  if (menu.style.display === 'none') {
    menu.style.display = 'block';
  } else {
    menu.style.display = 'none';
  }
});

// 点击菜单项时显示对应的子菜单
menu.addEventListener('click', function(event) {
  const target = event.target;
  if (target.tagName === 'LI') {
    menu.style.display = 'none';
    if (target.textContent === '组合') {
      subMenu.style.display = 'block';
    }
  }
});

// 点击子菜单项时显示提示信息
subMenu.addEventListener('click', function(event) {
  const target = event.target;
  if (target.id === 'tfboys') {
    alert('你选择的组合是TFBOYS');
  } else if (target.id === 'snh48') {
    alert('你选择的组合是SNH48');
  } else if (target.id === 'gnz48') {
    alert('你选择的组合是GNZ48');
  }
});

这个示例实现了一个简单的菜单，当用户点击菜单按钮时，弹出包含“男歌手”、“女歌手”、“组合”的菜单。当用户选择“组合”菜单项时，弹出包含“TFBOYS”、“SNH48”、“GNZ48”的子菜单。当用户选择子菜单项时，弹出对应的提示信息，告诉用户他们选择了哪个选项。