Выпадающее меню на HTML и CSS

Недавно один из подписчиков на моём YouTube канале попросил дать код выпадающего меню, который я использовал при создании своего блога на Blogger (https://dnikweb.blogspot.com/). Это меню реализовано на HTML и CSS. Думаю, что внести нужные правки в этот код вам не составит труда и вы сможете настроить красивое выпадающее меню на любом своём сайте.

Код CSS:

#navigation { font:bold 13px verdana; height: 35px; list-style: none; padding: 0px; margin: 0px auto; background:#0091d6; }
#navigation ul { left: -9999px; position: absolute; top: -9999px; z-index: 9; }
#navigation li { border-right: 1px solid #111; display: block; float: left; height: 35px; position: relative; width: 145px; }
#navigation li a { color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background-color:#0091d6; }
#navigation li a:hover{ background-color:#0091d6; }@-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }@-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } }
#navigation li > a:hover { -moz-animation-name: animation1; -

moz-animation-duration: 0.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#navigation li:hover > a { z-index: 4; }
#navigation li:hover ul.sub-menu { padding: 0; left: 0; top: 35px; width: 200px; }
#navigation ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; }
#navigation ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#0091d6; }
#navigation ul li a:hover{ background:#067ece; }@-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }@-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
#navigation li:hover ul li { -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#navigation li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; }
#navigation li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; }
#navigation li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
#navigation li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }
#navigation li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
#navigation li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
#navigation li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
#navigation li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }

Код HTML:

<ul id='navigation'>
<li><a href='https://d-nik.pro'>Главная</a></li>
<li><a href='#' class="disabled">Joomla!</a>
<ul class='sub-menu'>
<li><a href='#'>Руководство Joomla! 3</a></li>
<li><a href='#'>Руководство Joomla! 4</a></li>
<li><a href='#'>Руководство VirtueMart</a></li>
<li><a href='#'>Расширения Joomla!</a></li>
<li><a href='#'>Joomla! Программирование</a></li>
</ul>
</li>
<li><a href='#' class="disabled">Веб-разработка</a>
<ul class='sub-menu'>
<li><a href='#'>Заметки по HTML и CSS</a></li>
<li><a href='#'>Заметки по Javascript</a></li>
<li><a href='#'>Заметки по PHP</a></li>
<li><a href='#'>Заметки по MySQL</a></li>
<li><a href='#'>Заметки по Bootstrap</a></li>
</ul>
</li>
<li><a href='#' class="disabled">Веб-дизайн</a>
<ul class='sub-menu'>
<li><a href='#'>Adobe Photoshop</a></li>
<li><a href='#'>Картинки и иконки</a></li>
</ul>
</li>
<li><a href='#'>Офис</a>
<ul class='sub-menu'>
<li><a href='#'>MS Word</a></li>
<li><a href='#'>MS Excel</a></li>
</ul>
</li>
<li><a href='#' target="_blank">Видео уроки</a></li>
</ul>

Наши рекомендации

Сollaborator

Hosting Ukraine

АВТОРИЗАЦИЯ