@import url('https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab&subset=cyrillic,cyrillic-ext');
ul.menu {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  /*margin-top:25px; /*делаем отступ сверху*/
  background:#009900; /*добавляем фон всему меню*/
  height: 50px; /*задаем высоту*/
}
a.menu {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  text-shadow: 0 1px 1px #2D2020;
  background:#009900; /*добавляем фон к пункту меню*/
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  /*font-family: arial; /*меняем шрифт*/
  line-height:50px; /*ровняем меню по вертикали*/
  display: block; 
  border-right: 1px solid #006600; /*добавляем бордюр справа*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;

}
a.menu:hover {
  background:#00cc00; /*добавляем эффект при наведении*/
}
li.menu {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  position:relative; /*задаем позицию для позиционирования*/
}
     
    /*Стили для скрытого выпадающего меню*/
    li.menu > ul.menu {
        position:absolute;
        top:50px;
        display:none;   
    }
     
    /*Делаем скрытую часть видимой*/
    li.menu:hover > ul.menu {
        display:block; 
        width:250px;  /*Задаем ширину выпадающего меню*/      
    }
   li.menu:hover > ul.menu > li.menu {
        float:none; /*Убираем горизонтальное позиционирование*/
    }