Problème d'affichage sur Chrome d'un Menu réactif

Bonjour
Je suis débutant dans HTML/CSS, j'ai fais un menu réactif avec une image, je fais mon fichier dans dreamweaver cs5. Quant j'affiche mon fichier en Internet explorer mon état actif fonctionne correctement, mais dans Chrome et Firefox ça ne marche pas. Je ne sais si je suis très claire je ne connaît pas trop les termes.

voici le code HTML:
<div class="vertical">
<p><a id="index" href="index.html">Index</a>
<a href="page_1.html">page_1</a>
<a href="#">page_2</a>
<a href="#">page_3</a>
</p>
</div>

Voici le CSS:
.vertical a {
margin-top:25px;
margin-left:60px;
color: white;
/*background-color: #000080;*/
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 5px;
border: 2px outset #c0c0c0;
display: block;
background:url(images/menuseule.png) no-repeat;
width: 116px;
}

.vertical a:hover {
background-position: bottom left;
}
.vertical a:active {
background-position: bottom left;
}
.vertical #index:visited {
background-position: bottom left;
}
.vertical #page_1:visited {
background-position: bottom left;
}
merci par avance