Выпадающее меню на css

С этими праздниками, нормально до видео не добраться :) Сегодня мы будем делать меню с выпадающими списками на чистом CSS3. Без использования javascript.

Как обычно, все будет красиво, плавно, с анимацией - смотрите и наслаждайтесь!

==============================================

Ссылки из видео:

*** Заработай на своем YouTube канале ***

[CodexWeb]

Фишки вёрстки под гитару :) Ребята, ставьте лайк и делитесь плиз моими видео в своих соц.сетях. *Чем больше аудитория, тем больше мотивации удивлять вас новыми уроками*

[АлексейСамарин-йэ]

Ах.еть, нет слово, благодаря тебе я начинаю понимать как прекрасен CSS, спасибо Серега !

[fwkmjlm]

Подробнее урока я за 10 видео ещё не увидел, спасибо тебе большое, очень сильно выручил, Дай Бог тебе всего наилучшего

[ЕгорЛукин-чь]

Вот код кому лень писать
<div class="side">
<ul class="menu">
<li class="menu__list"><a href="#">Пункт 1</a>
<ul class="menu__drop">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li><a href="#">Пункт 2</a></li>
<li class="menu__list"><a href="#">Пункт 3</a>
<ul class="menu__drop">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li><a href="#">Пункт 4</a></li>
<li class="menu__list"><a href="#">Пункт 5</a>
<ul class="menu__drop">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
</ul>
</div>

[deomidfedorov]

Давно хотел этому всему научиться, много полезного за минимальное время. Огромное спасибо :)

[lancer-serega]

Во Серега жжет! Быстро, грамотно, качество и по делу!
Забрал к себе в группу ВК

Для новичков тяжеловато будет смотреть и параллельно делать

[alexti]

Ваши видео просто шедевры Screencasting -a! :))перестает хотеться что-то делать, просто хочется смотреть и получать удовольствие...)

[Jay-pppk]

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

[RomanKorostenskyi]

Побольше б таких уроков. Нет ничего лишнего. Очень спасибо. Желаю успехов в творчестве ^_^

[sARy]

Лайк, подписка и колокольчик. На всё нажал, так ещё и другу видео скинул. Сейчас для пракитики сайт пишем. Обучаемся тому, чему нас не научили.

[vsl]

Все очень доступно и четко выложено. Отличные у вас уроки!

[Mykhailo_Vdovychenko]

"Все гениальное - просто" и это правда.
Прошел Ваш урок с удовольствием! Классно, интересно, познавательно.

[_Fantom_.]

Это просто бомбезный урок, спасибо Серрега!...

[H-pv]

Впервые на этом канале...
Ну что сказать...



*Лайк, подписка!*
Даже не смотря видео)

[victoriabauer]

Один из самых лучших уроков, спасибо!

[alexmac]

все круто, четко и понятно!) и музыка на фоне - отличная!:))

[ВладДовоенно]

Красавчик очень хорошо излагаешь материал!! Лайк подписка :)

[technique]

Ну ты потный пацан, лайк и респект тебе за эту обучалочку, мой багаж знаний набрал обороты)))

[mexvision-]

pointer-events: none; Делает элемент не восприимчивым для мыши.
Зачем выносить блоки за экран?

[vahesargsyan]

Большое вам спасибо, классно помогли!!!