Вертикальное выпадающие меню на CSS

Как-то написал я скромный пост о том что нужно знать при верстке выпадающих меню для сайта, а сегодня выкладываю уже готовое вертикальное выпадающие меню. Сделано оно без применения скриптов, функционал блоков только при помощи CSS, анимация реализуется с помощью CSS3.
  Меню можно использовать как простое вертикальное меню, то есть без выпадающих блоков, так и как многоуровневое выпадающие меню. HTML разметка у него самая обычная - список с ссылками. Анимация CSS3 применяется для того чтобы сделать в меню плавное появление выпадающих блоков и выделить реакцию ссылки при наведении курсора.

 Смотрим:
DEMO
 Изучаем, забираем.
 HTML разметка самая обычная:

<div id='menu-block'>
 <ul class='vertical-menu'>
  <li><a href="#">Раздел 1</a>
  <li><a href="#">Раздел 2</a>
  <li class='drop-link'><a href="#">Раздел 3</a>
    <ul class='drop-block'>
      <li><a href="#">Раздел 3.1</a>
      <li class='drop-link'><a href="#">Раздел 3.2</a>
         <ul class='drop-block'>
           <li><a href="#">Раздел 3.2.1</a>
           <li><a href="#">Раздел 3.2.2</a>
           <li><a href="#">Раздел 3.2.3</a>
         </ul>
      </li>
      <li><a href="#">Раздел 3.3</a>
    </ul>
  </li>
  <li class='drop-link'><a href="#">Раздел 4</a>
    <ul class='drop-block'>
      <li><a href="#">Раздел 4.1</a>
      <li><a href="#">Раздел 4.2</a>
      <li><a href="#">Раздел 4.3</a>
      <li><a href="#">Раздел 4.4</a>
      <li><a href="#">Раздел 4.5</a>
    </ul>
  </li>
  <li><a href="#">Раздел 5</a>
</ul>
</div>

  Здесь специально добавлено несколько дополнительных подпунктов, чтобы было нагляднее. Селекторов используется всего четыре, можно конечно использовать и меньше, но так удобнее.
  CSS для данного выпадающего меню выглядит так:

#menu-block {
  padding: 0;
  margin: 0;
}
/*стили всего блока меню, пунктов и ссылок*/
.vertical-menu {
  display: block;
  background: #3D0066;
  border: solid 1px #B84DFF;
  border-radius: 5px;
  padding: 0;
  margin: 0;
  width: 200px; /*ширина меню и выпадающих блоков*/
}
.vertical-menu li {
  position: relative;
  list-style: none;
  outline: none;
  background: #7339BA;
  background: -moz-linear-gradient(top, #6323b2 0%, #b685f7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6323b2), color-stop(100%,#b685f7));
  background: -webkit-linear-gradient(top, #6323b2 0%,#b685f7 100%);
  background: -o-linear-gradient(top, #6323b2 0%,#b685f7 100%);
  background: -ms-linear-gradient(top, #6323b2 0%,#b685f7 100%);
  background: linear-gradient(to bottom, #6323b2 0%,#b685f7 100%);
  border: solid 1px #D6C2FF;
  border-radius: 5px;
  padding: 0;
  margin: 2px;
/*анимация для пунктов*/
  -webkit-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  -moz-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  -o-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
.vertical-menu li:hover {
  background: #ccf;
  border: solid 1px transparent;
  border-radius: 5px;
  box-shadow: inset 0 0 8px #fff;
  margin: 2px 10px;
}
.vertical-menu a {
  display: block;
  text-decoration: none;
  text-align: left;
  font: normal normal 14px Verdana; /*шрифт всех пунктов*/
  color: #E6E6FF;
  text-shadow: 1px 0 4px #000, 2px 0 7px #d91cd9;
  box-shadow: none;
  padding: 7px; /*регулируем высоту всех кнопок меню*/
  margin: 0;
}
.vertical-menu a:hover {
  color: #3D1F4C;
  text-shadow: 1px 0 4px #fff, 2px 0 7px #290052;
}
/*стиль пункта с подменю*/
.drop-link > a {
  margin: 0;
  -webkit-transition: margin 0.5s ease;
  -moz-transition: margin 0.5s ease;
  -o-transition: margin 0.5s ease;
  transition: margin 0.5s ease;
}
.drop-link > a:hover {
  margin: 0 0 0 10px;
}
.drop-link:hover {
  background: #ccf; /*выделяем ссылку родитель выпадающего блока*/
}
/*стили для уголков*/
.drop-link:after,
.drop-link:before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
}
.drop-link:before {
  border: solid 14px;
  border-color: #D6ADFF transparent transparent transparent;
  margin: 0 12px 0 0;
}
.drop-link:after {
  border: solid 10px;
  border-color: #4C1A80 transparent transparent transparent;
  margin: 0 15px 0 0;
}
.drop-link:hover:before {
  border: solid 16px;
  border-color: transparent #6323b2 transparent transparent;
  margin: -3px 0 0 0;
}
.drop-link:hover:after {
  border: solid 12px;
  border-color: transparent #b685f7 transparent transparent;
  margin-right: 0;
}
.drop-block {
  display: block;
  position: absolute;
  z-index: 1000;
  left: 100%; /*если меню справа - right: 100%;*/
  top: -9999em; /*скрываем выпадающие блоки*/
  background: #3D0066;
  border: solid 1px #B84DFF;
  border-radius: 10px;
  box-shadow: 0.5em 1em 1em #666; /*если меню справа - box-shadow: -0.5em 1em 1em #666;*/
/*анимация для выпадающих блоков*/
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0;
  padding: 0;
  margin: -10px -20px 0 0; /*если меню справа - margin: -10px -10px 0 0;*/
  min-width: 250px; /*обычная ширина*/
  width: auto; /*ширина если строка без пробелов и переносов*/
}
.drop-link:hover > .drop-block {
  top: 0; /*показываем выпадающие блоки*/
  opacity: 1;
}

  На этом собственно все, меню сделано и готово к использованию.

  Напоследок пару костылей для любителей старых версий всеми любимого IE. Собственно, как всегда IE 8 "подложил мину". Как показали клинические исследования в Internet Explorer 8, меню не "выпадает", но проблема была решена когда был убран градиент для IE.

filter: progid:DXImageTransform.Microsoft.Gradient( условия );

  Но так как в IE 9 все в порядке с выпадением, то градиент его пользователям можно и вернуть, а сделаем это можно при помощи вот такого "костыля", он кстати, решает еще несколько проблем с отображением в IE 9.

<!--[if IE 9]>
<style type="text/css">
.vertical-menu li {
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6323b2', endColorstr='#b685f7',GradientType=0 );
}
.vertical-menu li:hover {
  margin: 2px;
}
.drop-link > a:hover {
  margin: 0;
}
ul.vertical-menu a:hover {
  background: #ccf;
}
</style>
<![endif]-->

Вот теперь точно все. Такое получилось анимированное выпадающие меню. Тестируем, делимся впечатлениями, критикуем.
©http://magentawave.com