Многоуровневое меню SlikNav на рабочем столе?

Я использую 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, чтобы выпадающее меню также работало на рабочем столе?

Ответы

Ответ 1

прямо сейчас, меню уже выпадающее меню в рабочем режиме, а также в мобильном режиме.

Просто для того, чтобы выглядеть хорошо, сделайте это - добавьте класс "sub" в ul после li.

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

Ответ 2

Я не знаю, как это сделать, но у меня есть альтернативное и быстрое решение.

Вы можете использовать плагин smartmenu Вот пример Нажмите здесь Preview

Javascript Code

HTML Code

Надеюсь, это поможет вам.