Как сделать выпадающее меню на CSS

В данном видеоуроке у нас речь пройдет про создание горизонтального, выпадающего меню. Делать мы его будем на чистом CSS, поэтому всяких классных эффектов при появлении списка, типа выплывания или плавного появления здесь не добиться. Если вы хотите создать меню с подобными эффектами, то для этих целей используйте jQuery.

Мы же с вами обойдемся лишь средствами CSS.

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

Чтобы увить то, что мы получим, кликните по кнопке «посмотреть демо» под видеоуроком.

Смотреть видеоурок

Что касается кроссбраузерности, то данное меню работает в Firefox, Opera, Chome, Safari, IE8+, поэтому вы можете его спокойно применять на своем сайте.

Я думаю, что теперь у вас не возникнет проблем при верстки подобных менюшек. Если данная тема вам оказалась интересной, пожалуйста напишите в комментариях, стоит ли записать аналогичный урок про создание выпадающего меню, но только уже с использованием jQuery?

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

  • 17.01.2017 19:12

    У меня вопрос.
    На 9-й минуте после добавления #menu ul ul {display:none;} остались основные пункты без пустых строк, у меня же получается что они разделены пустыми строками: 'Главная', пустая строка, 'Видеоуроки', пустая строка, 'Статьи', пустая строка, 'Контакты'. И если в последнем пункте добавить подпункты, то также появляется в конце еще одна пустая строка.

    Подскажите в чем может быть проблема ???

  • еще один интересный пример выпадающего меню – http://siteacademy.ru/index.php/css/45-css3-dropdown-menu

  • 28.08.2015 21:01

    Александр, спасибо! Очень пригодился Ваш урок! Но вот беда… если после меню идет обзац текста, как в Вашем примере, то все работает просто замечательно. А если, после меню поместить блок div, в котором отображаются плавно сменящиеся фото (при помощи библиотеки jQuery), то меню выпадает под этот блок и становится не видимым. Подскажите, пожалуйста, как можно решить эту проблему. Очень нужна Ваша помощь! Заранее спасибо!!!

  • 27.01.2015 19:12

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

  • Спасибо, Александр, за очередной хороший урок.
    Конечно, было бы здорово увидеть "аналогичный урок про создание выпадающего меню, но только уже с использованием jQuery". И очень нужна еще похожая тема – всплывающие подсказки с использованием jQuery.