桌面视图中的SlikNav多级菜单?

I'm using SlikNav to make a mobile navigation menu. I have this structure:

我使用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>

This works fine on mobile view, here is a codepen.

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

My desktop version of this is simply: nav ul li { display:inline; } which makes the list display inline.

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

My question, is it possible for SlickNav to make the dropdown menu also work in desktop view?

我的问题是，SlickNav是否可能让下拉菜单也在桌面视图中工作?

1 个解决方案

#1

right now, the menu is already a dropdown in desktop mode and also in mobile mode..

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

Just for looks good, do that - add a class "sub" in ul after li.

为了美观，在li后面的ul中添加一个class“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>

and css -

和css -

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

1 个解决方案

#1

更多相关文章

随机推荐