borda

Gente, me ajudem eu não sei qual é o lance desse erro banal, sei que é um erro idiota, eu mesmo já resolvi mas a solução do mesmo problema em outro momento não tá funcionando agora.

o lance é o seguinte, eu botei uma border-top no efeito hover só que não aparece a borda e deixa a li como está, o o li, segue o html e o css:

HTML

>

 <div id="menu">
 <ul>
 <li><a href="#pg-sobre">Sobre</a></li>
 <li><a href="#pg-projetos">Projetos</a></li>
 <li><a href="#pg-servicos">Serviços</a></li>
 <li><a href="#pg-contato">Contato</a></li>
 </ul>
 </div>

CSS

>

#menu {float:right;}
#menu ul {padding-right: 15px;}
#menu ul li {display:inline-block; height:80px; }

#menu ul li a {text-decoration:none; color:rgb(39,37,31);
margin:15px; height:80px;
line-height:80px;
}

#menu ul li:hover {height:76px; border-top:solid 4px #000; }
#menu ul li a:hover {color:rgb(52,189,179); height:80px; }

me ajudem ai, eu não quero que a palavra do menu desça na hora que eu passar o mouse,

obg galera!!