具有多级下拉菜单的最简单的 JQuery 动画导航栏

Question

我正在为一个网站创建一个导航栏，我需要一种非常简单的方法来创建从主栏到带有进一步下拉级别的下拉列表的 2 个级别的下拉列表。

我正在使用没有额外插件的 JQuery。

“最简单”是指最少的代码行和最少的变量，因此加载时间最快。

我尝试过使用 hover() 事件，但这似乎不起作用。

以下是 HTML 示例：

<div class="menu">
   <ul>
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 2</a>
           <ul class="sub">
               <li><a href="#">Sub 1</a>
                   <ul class="sub2">
                       <li><a href="#">Sub 2</a></li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>
</div>

理想情况下，将鼠标悬停在“Link 2”上将使子列表向下滑动，将鼠标悬停在“Sub 1”上将使子列表在其旁边向下滑动。

另外，我在大多数维度上都使用了百分比，所以如果它以相同的方式缩放会非常有用。

如果需要更多信息，请在否决之前询问。

谢谢。

Answer 1

最好的 jQuery 不是 jQuery。

.menu input {
  position: absolute;
  left: -9999px;
}
.menu label {
  cursor: pointer;
  display: block;
}
.menu label:after {
  content: '...';
}
.sub {
  display: none;
}
.menu label:hover+input+.sub,
.menu input:checked+.sub,
.sub:hover {
  display: block;
}

<div class="menu">
   <ul>
       <li><a href="#">Link 1</a></li>
       <li>
           <label for="menu-2">Link 2</label>
           <input type="checkbox" id="menu-2" />
           <ul class="sub">
               <li>
                   <label for="menu-2-1">Sub 1</label>
                   <input type="checkbox" id="menu-2-1" />
                   <ul class="sub">
                       <li><a href="#">Sub 2</a></li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>
</div>

根据需要添加更多 CSS。