Menu na chromie się trochę rozsypuje

Witam, mam problem z menu w chromie, normalnie wygląda to tak w mozilli:
http://screenshooter.net/100395200/maswxww
gdy najedziemy to wyświetla się border-bottom i jest to jako image obrazek.

A tak się wyświetla w chromie:
http://screenshooter.net/100395200/wsjcihk
Nie wiem z jakiej paki jest ten border na górze.

Html:

 <div class="col-lg-10 col-md-10 col-sn-12 col-xs-12">
<div class="menu">

<ul>
<li><a href="">Start</a></li>
<li><a href="">O firmie</a></li>
<li><a href="">Certyfikat FGZ</a></li>
<li><a href="">Klienci</a></li>
<li><a href="">Zespół</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Kontakt</a></li>
<li><a href="">Kariera</a></li>
</ul>

</div>
</div>

i css:

 
.menu{
	width:100%;
	height:80px;
	background-color:white;
	margin-top:20px;
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
	font-family: 'NerisBlack';
}

.menu ul{
	list-style:none;
    margin:0;
    padding:0;
    text-align:center;
	height:80px;
	padding-top:31px;
}

.menu ul li{
display:inline;
}

.menu ul li a{
	  display:inline-block;
    padding-left:20px;
	padding-right:20px;
	text-decoration:none;
	font-size:13px;
	color:#73848c;
	padding-bottom:20px;
}

.menu ul li a:hover{
	border-top:none;
	border-bottom:solid 9px;
	color:#33bac7;
	-webkit-border-image: url(img/menu-border.png) 8 round; /* Safari 3.1-5 */
    -o-border-image: url(img/menu-border.png) 8 round; /* Opera 11-12.1 */
    border-image: url(img/menu-border.png) 8 round;
	-moz-border-image:url(img/menu-border.png) 8 round;
}

Nie mam pojęcia dlaczego, może ktoś z was miał już taki problem?

Dobra to poradziłem sobie z tym;

border-top:none;

zamieniłem na border-top: solid 0px; i śmiga

Ale jeszcze dziwnie pływa na boki.

no śmieszne to jest musiałem wszystkie pozostałe bordery czyli top, left i right dać na 0px bo inaczej w chromie nie działa normalnie. Dziwne. Dobra temat do kasacji.

Sprawdź sobie hasło 'reset css'