Как вывести выделение меню при наведении?

Question

[lord amotar]

как выделить рамку меню при наведении как в изображении? что не правильно делаю

<ul>
      <li><a href="" target="_blank">contact</a></li>
      <li><a href="" target="_blank">portfolio</a></li>
      <li><a href="" target="_blank">features</a></li>
      <li><a href="" target="_blank">services</a></li>
      <li class="active"><a href="" target="_blank">home</a></li>
    </ul>

.main_mnu ul li:active {
  border: 1px solid #33ccff;
}
.maian_mnu a{
	color: #fff;
	padding:  15px;
	display: block;
}
.maian_mnu a:hover{
	color: #33ccff;

Answer 1

[Илья Белобородов]

.main_mnu ul li:active,
.main_mnu ul li:hover {
  border: 1px solid #33ccff;
}
.maian_mnu a{
  color: #fff;
  padding:  15px;
  display: block;
}
.maian_mnu a:hover{
  color: #33ccff;