Bug padding avec google chrome et IE

Bonjour tout le monde,
Je suis débutant en css et je commence à créer mon site, donc voilà, dans la barre de navigation, quand on survole un lien, une ligne bleu ce forme en dessous, comme ceci:
http://data.imagup.com/member2/1172262003_Sans titre.png
Sous Firefox ça affiche bien comme vous pouvez le voir, mais sous IE et google chrome, ça ce décale et ça donne ceci:
http://data.imagup.com/member2/1172262120_Sans titre.png
Comme vous le voyez la barre bleu est plus haute que sous Firefox, pourtant ma fiche de style ne semble pas poser de problème:

{
	width: 900px;
	height:50px;
	margin: auto;
	margin-bottom: 0px;
	border: 1px transparent solid;
	background-color: #393939;
	box-shadow: 6px 6px 6px rgba(0,0,0, 0.5)
}
nav ul
{
	list-style-type: none;
	padding: auto;
	color: white;
}
nav li
{
	display: inline-block;
    margin-right: 15px;
}
nav a
{
	font-size: 15px;
	font-family: OpenSansRegular;
	color: #C8C8C8;
	padding-bottom: 10px;
	text-decoration: none;
}
nav a:hover
{
	color: white;
	border-bottom: 3px #00E6FF solid;
	
	text-shadow: 0px 0px 6px rgba(255,255,255, 1)
}

Et voilà le code HTML de la barre de navigation:

			
<nav>
	<ul>				
		<li><a href="Index.html" >Home</a></li>

		<li><a href="Downloads.html" >Downloads</a></li>

		<li><a href="Projects.html" >Projects</a></li>

		<li><a href="#" >Forum</a></li>

		<li><a href="About.html" >About</a></li>
	</ul>
</nav>

Quelqu'un pourrait il m'aider s'il vous plait? Merci!