Выпадающее МЕНЮ на чистом CSS / HTML

В этом уроке мы сделаем, #выпадающее #горизонтальное #меню. Оно будет имеет #шрифтовые #иконки которые при наведении на меню меняют цвет.

Сделаем небольшую #анимацию, в ней меняем цвет кнопки и текста, добавляем тень и все это отображается при наведении.
#Выпадающие #списки меню можно реализовать многоуровневыми простым копированием #UL и это все довольно просто реализовано на чистом #CSS / #CSS3.

В уроке задействуем:
• #display: #flex;
• используем #transition;
• позиционировать элементы при помощи #position

*Видео метки*:
[01:13] - Структура разметки в #html
[02:22] - Подключаем шрифтовые иконки
[04:10] - Описываем #стили в #CSS
[04:29] - Подключаем шрифт Cuprum
[04:29] - Анмируем при наведении #hover
[08:10] - Выпадающее меню
[11:56] - CSS генератор #background

*Другие видео на канале DWSTV*:

Во время урока я использую:
Документацию по #CSS3
Редактор #PhpStorm

Ссылки из урока:

Использую музыку:
Love Me Like You Do (Violin Cover by Robert Mendoza) [from FIFTY SHADES OF GREY soundtrack]

Добавляйтесь к нам в друзья:

Мы очень рады если видео по #CSS3 #меню было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.

[mishalitvin]

Отличный микрофон, монтаж и сам автор молодец. Говорит быстро и внятно, без заиканий . Спасибо вам огромное!

[billyukrop]

ОЧЕНЬ ТРАВИТСЯ КОНТЕНТ ДАННОГО КАНАЛА! Приятно глазу и очень хорошо разобраны примеры!

[clever_distr]

Огромное вам спасибо! Нашел то чего искал, благодаря вам. Было очень понятно и ясно, а еще очень интересно!
Больше вот таких классных видеоуроков выпускайте !!! Респект вам!!!

[tpsbeob]

Спасибо за видео. Объяснение понятное, четкое и лаконичное. Лучшее видео по "менюшке", которое встречал в инете. Спасибо за работу.

[dvslxhd]

Здравствуйте Денис, хочу сказать что у вас очень интересные уроки,
буду ждать (НОВЫХ)
СПАСИБО :-)

[oleksandrharkusha]

Я восторге от твоих уроков, не прекращай этим заниматься у тебя ТАЛАНТ!!!

[filevav]

Очень хорошо! Аплодирую стоя!!! Ждем продолжения по адаптации данного меню под адаптивную верстку)

[cbuicjj]

Добрый день! спасибо огромное за ваш урок! Все делал по вашему уроку, все выходит замечательно!

[oleksiirudenko]

сейчас такое лютое количество подобного контента, но твоя работа явно выделяется от остальных! мега круто

[KindCat]

Уровень знаний и подача материала впечатляет. Спасибо!

[dreamer]

Отличное видео. Звук и картинка на высшем уровне, а объяснение что, как и куда очень понятно. Спасибо большое, до этого думал, что это сложнее

[alexandrryzhenkov]

Так все быстро сказал, что я даже не успел запомнить)))
Спасибо большое !! Все супер.

[hshhhlj]

Отличный урок, спасибо большое)
*Ждем вторую часть*

[doskerprovokator]

Идеально - кратко, понятно и по сути, качество записи на отлично!

[mishasv]

Удивительное качество и подача материала, за готовый код с сайта отдельное спасибо. Видно сколько сил автор вложил в создание видео!

[ravabat]

Денис спасибо за видео, очень познавательно. Голос приятный, музыка на фоне спокойная - абсолютно не мешает. Лайк за видео и подписка на ваш канал обязательно! Респект.

[uszakow]

Спасибо большое! Делал несколько раз меню для своих любительских проектов - и всегда это было сложно, долго и не пойми как. Хотя и работало по факту, но это была пытка - в результате стал просто бояться писать менюшки. А тут все настолько просто, понятно, быстро и доступно! Обязательно буду теперь пробовать у себя!

[TheAlexmaxakt]

Спасибо большое, очень выручила отборка элементов по группам, просто и доходчиво! Пример супер!!!

[kinggiv]

люблю такие уроки, все по теме, развернуто, без воды. в копилку однозначно пока на запомню все!

[zvuqcdu]

Великолепный урок! Спасибо большое автору!