<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; // весенний бутон } .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 > a{ width: 100%; display: inline-block; padding: 10px 20px; color: inherit; text-decoration: none; } .inner_menu > li > a:hover{ color: white; background-color: #a7fc00; }