javascript - 桌面视图上的 SlikNav 多级菜单？

Question

我正在使用SlikNav制作移动导航菜单。我有这个结构：

<nav>
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Products</a>
            <ul>
                <li>
                    <a href="#">Child1</a>
                </li>
                <li>
                    <a href="#">Child2</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

这在移动视图上运行良好，这是一个codepen。

我的桌面版本很简单：nav ul li { display:inline; }它使列表内联显示。

我的问题是，SlickNav是否可以使下拉菜单也可以在桌面视图中使用？

Answer 1

现在，菜单已经是桌面模式和移动模式下的下拉菜单..

只是为了看起来不错，这样做 - 在 li 之后的 ul 中添加一个类“sub”。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
      <ul class="sub">
        <li><a href="#">Child1</a></li>
        <li><a href="#">Child2</a></li>
      </ul>
    </li>
  </ul>
</nav>

和 CSS -

li{
  float: left;
}
li > ul.sub{
  margin: 0;
}

Answer 2

我不知道该怎么做，但我有一个替代且快速的解决方案。

您可以使用smartmenu 插件这里是示例点击这里

希望对您有所帮助。