Question

由于我是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>

等等。

我想要的是第一个下拉菜单，它显示我的类型，第二个下拉菜单，在选择类型后，模型显示。当选择模型时，链接应显示在下拉菜单下方（也是第三个下拉菜单，其中包含链接文本和“执行”按钮正常）。

它应该很简单，但我无法达到它！我尝试了不同的方法但没有： - （。

有人暗示过我吗？

P.S。抱歉我的英语不好。

@Zapp：我错过了什么或者代码应该是这样吗？

<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>

无论如何，感谢您给予我的所有帮助！我接近我想要的结果:)。

Answer 1

这是基本结构。复制并尝试一下。然后将其修改为您需要的内容：

＆＃13;

<style>

li {list-style:none;}

ul li ul li { display:none; }
ul li:hover ul li {display:block; }
</style>

<ul>
<li><h2>Type 1</h2></li>
<li><h3>Model 1</h3></li>
<li><a href="....">link 1</a></li>
<li><a href="....">link 2</a></li>
<li><a href="....">link 3</a></li>
<li><h3>Model 2</h3></li>
<li><a href="....">link 1</a></li>
<li><a href="....">link 2</a></li>
<li><ul><h2>Type 2</h2></li>
<li><h3>Model 1</h3></li>
<li><a href="....">link 1</a></li>
<li><h3>Model 2</h3></li>
<li><a href="....">link 1</a></li>
<li><a href="....">link 2</a></li>
<li><a href="....">link 3</a></ul></li>
</ul>

＆＃13;

从HTML标题和段落

1 个答案: