Edit in JSFiddle

<div id="header">
  <ul id=top_menu>
    <li><a href="#">О компании</a></li>
    <li><a href="#">Услуги</a>
      <ul class="inner_menu">
        <li><a href="#">Отремонтируем</a></li>
        <li><a href="#">Починим</a></li>
        <li><a href="#">Наладим</a></li>
      </ul>
    </li>
    <li><a href="#">Товары</a>
      <ul class="inner_menu">
        <li><a href="#">Медиацентры</a></li>
        <li><a href="#">Музыкальные центры</a></li>
        <li><a href="#">Кассетные магнитофоны</a></li>
        <li><a href="#">Бабинные магнитофоны</a></li>
        <li><a href="#">Граммофоны</a></li>
      </ul>
    </li>
    <li><a href="#">Популярные вопросы</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</div>

*{
  box-sizing: border-box;
}
#header{
  background-color: #aaf0d1; //магическая мята
  border-bottom: 1px solid gray; 
  text-align: center;
}
#top_menu{
  display: inline-block;
  list-style: none;
  padding-left: 0;
  margin: 0;
}
#top_menu > li{
  display: inline-block;  
  position: relative;
}
#top_menu > li > a{
  display: inline-block;
  padding: 10px 20px; 
  color: inherit;
  text-decoration: none; 
  transition: background-color 0.25s, color 0.15s;
}
#top_menu > li > a:hover{
  color: white;
  background-color: #a7fc00; // весенний бутон  
}
#top_menu > li:hover > ul a{
  opacity: 1;
}
#top_menu > li:hover > ul li{
  height: 40px;
  opacity: 1;
}
.inner_menu{
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding-left: 0;
  text-align: left;
  white-space: nowrap;
  background-color: #aaf0d1;
}
.inner_menu > li{
  height: 0;
  opacity: 0;
  transition: height 0.3s, opacity 0.4s;
}
.inner_menu > li > a{
  width: 100%;
  display: inline-block;
  padding: 10px 20px; 
  color: inherit;
  text-decoration: none; 
  height: inherit;
  overflow: hidden;
  opacity: 0;
  transition: height 0.4s, opacity 0.5s;
}
.inner_menu > li > a:hover{
  color: white;
  background-color: #a7fc00; 
}