Простенькая менюшка

Приветствую, накидал небольшую менюшку, может кому пригодится :3



HTML:

HTML:

<ul id="main_menu">
  			<li class="event"><h4>Магазин</h4></li>
  			<li class="event"><h4>Справочник</h4></li>
  			<li class="event"><h4>Продукция</h4></li>
  			<li class="event"><h4>Карта</h4></li>
  			<li class="event"><h4>Контакты</h4></li>
  			<li class="img_mm"/>
  			<li class="event_one"><h4>Вход</h4></li>
  			<li class="event_one"><h4>Регистрация</h4></li>
		</ul>

CSS:

HTML:

@import "http://webfonts.ru/import/certege.css";
body {
  margin: 40px;
}
#main_menu {
  max-width: 1000px;
  min-width: 320px;
  height: 55px;
  background-color: #fcd586; 
}
.img_mm {
  
}
.event {
  float: left;
  display: inline-block;
  list-style: none;
  margin: 0 14px 0 10px;
  line-height: 75%;
  text-align: center;
}
.event > h4 {
  color: #322626;
  font-family: 'Certege';
  font-size: 17px;
  transition: .3s ease;
}
.event_one > h4 {
  color: #322626;
  font-family: 'Certege';
  font-size: 17px;
  transition: .3s ease;  
}
.event_one {
  float: right;
  display: inline-block;
  list-style: none;
  margin: 0 18px 0 10px;
  line-height: 75%;
  text-align: center;
}
.event > h4:hover {
  color: black;
}
.event_one > h4:hover {
  color: black;
}