Javascript 从HTML标题和段落创建下拉菜单

由于我对JavaScript和JQuery完全不熟悉，因此在创建以这种方式构造的HTML文档开始的下拉菜单时遇到一些问题：

<h2>Type 1</h2>
<h3>Model 1</h3>
<a href="....">link 1</a>
<a href="....">link 2</a>
<a href="....">link 3</a>
<h3>Model 2</h3>
<a href="....">link 1</a>
<a href="....">link 2</a>
<h2>Type 2</h2>
<h3>Model 1</h3>
<a href="....">link 1</a>
<h3>Model 2</h3>
<a href="....">link 1</a>
<a href="....">link 2</a>
<a href="....">link 3</a>

类型1
模式1
模式2
类型2
模式1
模式2

等等

我想要的是第一个下拉菜单，显示我的类型，第二个下拉菜单中，在选择类型后，显示模型。当模型也被选中时，链接应出现在下拉菜单下方（还有第三个带有链接文本和“go”按钮的下拉菜单也可以）

这应该很简单，但我做不到！我试过不同的方法，但什么都没有

有人给我暗示了吗

顺便说一句，对不起，我的英语不好

@扎普：是我遗漏了什么，还是代码应该如此

<ul>
  <li>
    <h2>Type 1</h2>
    <ul>
      <li>
        <h3>Model 1</h3>
        <ul>
          <li><a href="....">link 1</a></li>
          <li><a href="....">link 2</a></li>
          <li><a href="....">link 3</a></li>
        </ul>
      </li>
      <li>
        <h3>Model 2</h3>
        <ul>
          <li><a href="....">link 1</a></li>
          <li><a href="....">link 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <h2>Type 2</h2>
    <ul>
      <li>
        <h3>Model 1</h3>
        <ul>
          <li><a href="....">link 1</a></li>
        </ul>
      </li>
      <li>
        <h3>Model 2</h3>
        <ul>
          <li><a href="....">link 1</a></li>
          <li><a href="....">link 2</a></li>
          <li><a href="....">link 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

类型1


模式1







模式2








类型2


模式1





模式2

---

无论如何，谢谢你给我的所有帮助！我已经接近我想要的结果了：）

这是基本结构。复制它并尝试它。然后根据需要对其进行修改：

li{列表样式：无；}
ul li ul li{显示：无；}
ul li:悬停ul li{display:block；}

类型1
模式1



模式2


类型2
模式1

模式2

您不使用.css有什么原因吗？如果没有，您可以将所有内容放入

和
• 标签中。使用.css，您将使用pseudos来实现悬停下拉效果。首先，感谢您的回答。我可以用
  和
  • 包装所有内容，但如何包装？li中应该有ul（用于模型）？那么，是否有可能使用css，从我的HTML代码中创建2个不同的下拉菜单？此外，w3schools.com是浏览您的学习/建筑的好地方。