Простое горизонтальное меню на CSS

Меню не имеет альтернативной мобильной версии, но она может и не пригодиться, т.к. пункты меню хорошо складываются на узких экранах.

Пример:

HTML:

Активные пункты <li> верхнего меню имеют класс active, а пункты с вложениями menu-children

CSS:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Дмитрий:

    Добрый вечер. Выпадающее подменю почему-то исчезает при наведении.

    Ответить
    • Alexander:

      Не видя результат, я не смогу ничего подсказать...

      Ответить
      • Дмитрий:

        Пожалуйста посмотрите здесь iv-media.ru

        Ответить
        • Alexander:

          У вас нижняя секция перекрывает верхнюю, в котором меню и имеет z-index.
          Нужно добавить к класу .sp-page-builder .page-content #section-id-1661368948425:
          position: relative;
          z-index: 10;

          Ответить
          • Дмитрий:

            Ваше решение помогло. Спасибо!

            Ответить
  • Андрей:

    Привет. Было бы круто, если бы вы показали как сделать горизонтальное меню с прокруткой в сторону для мобильной версии.

    Ответить
    • Alexander:

      Ну оно на мобилу и не задумывалось.
      Смысл, что оно там прячется, и ставится вроде этого:
      А если делать горизонтальную прокрутку, то ставить его в какой то контейнер, но там может возникнуть проблема с выпадайкой.

      Ответить
      • Андрей:

        Это да. Пробовал, но так и не получилось ничего. Точнее сказать поставить то я его поставил, но вот скролл не удалось убрать. Вот тут код брал.

        Ответить
      • Андрей:

        Было бы круто, если бы вы реализовали подписку на комментарии на вашем сайте. Не очень удобно 🙂

        Ответить
        • Alexander:

          но вот скролл не удалось убрать

          Я так и не понял, вам нужно убрать скрол или поставить?
          Если убрать из вашего примера, то уберите просто white-space: nowrap;

          ЗЫ, А про коментарии да, нужно будет сделать.

          Ответить