<div id="header"> <ul id=top_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> </div>
#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; } #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; // весенний бутон }