﻿#menu-block {
  padding: 0;
  margin: 0;
}
/*стили всего блока меню, пунктов и ссылок*/
.vertical-menu {
  display: block;
  background: #466817;
  border: solid 1px #91CC41;
  border-radius: 5px;
  padding: 0;
  margin: 0;
  width: 180px; /*ширина меню и выпадающих блоков*/
}
.vertical-menu li {
  position: relative;
  list-style: none;
  outline: none;
  background: #6A9E21;
  background: -moz-linear-gradient(top, #6A9E21 0%, #91CC41 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91CC41), color-stop(100%,#91CC41));
  background: -webkit-linear-gradient(top, #6A9E21 0%,#91CC41 100%);
  background: -o-linear-gradient(top, #6A9E21 0%,#91CC41 100%);
  background: -ms-linear-gradient(top, #6A9E21 0%,#91CC41 100%);
  background: linear-gradient(to bottom, #6A9E21 0%,#91CC41 100%);
  border: solid 1px #96E81B;
  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: #CCF98B;
  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 #2A93AB;
  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: #466817 transparent transparent transparent;
  margin: 0 12px 0 0;
}
.drop-link:after {
  border: solid 10px;
  border-color: #1DF73A transparent transparent transparent;
  margin: 0 15px 0 0;
}
.drop-link:hover:before {
  border: solid 16px;
  border-color: transparent #466817 transparent transparent;
  margin: -3px 0 0 0;
}
.drop-link:hover:after {
  border: solid 12px;
  border-color: transparent #1DF73A transparent transparent;
  margin-right: 0;
}
.drop-block {
  display: block;
  position: absolute;
  z-index: 1000;
  left: 100%; /*если меню справа - right: 100%;*/
  top: -9999em; /*скрываем выпадающие блоки*/
  background: #466817;
  border: solid 1px #91CC41;
  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;
}