Question

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

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

“最简单”，我的意思是代码最少，变量最少，加载时间最短。

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

以下是HTML的示例：

echo

理想情况下，将鼠标悬停在“链接2”上会使子列表向下滑动，将鼠标悬停在“子1”上会使子列表向下滑动。

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

如果需要更多信息，请在投票前询问。

感谢。

Answer 1

最好的jQuery不是jQuery。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

根据需要添加更多CSS。

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

1 个答案: