a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
<!-- Para el index.html -->
<nav id="index">
<ul id="menu">
<li><a href="index.html" class="index">index</a></li>
<li><a href="pagina2.html" class="pagina2">pagina2</a></li>
<li><a href="pagina3.html" class="pagina3">pagina3</a></li>
<li><a href="pagina4.html" class="pagina4">pagina4</a></li>
</ul>
</nav>
<!-- Para la pagina2.html -->
<nav id="pagina2">
<ul id="menu">
<li><a href="index.html" class="index">index</a></li>
<li><a href="pagina2.html" class="pagina2">pagina2</a></li>
<li><a href="pagina3.html" class="pagina3">pagina3</a></li>
<li><a href="pagina4.html" class="pagina4">pagina4</a></li>
</ul>
</nav>
<!-- Y lo mismo para el resto -->
#menu a:hover {
color: #1E1E1E;
background-color: #E1E1E1;
}
#index #menu li .index,
#pagina2 #menu li .pagina2,
#pagina3 #menu li .pagina3,
#pagina4 #menu li .pagina4{
color: #1E1E1E;
background-color: #E1E1E1;
border: 2px solid #CA464F;
}
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Menú con CSS</title>
</head>
<body>
<header>
<h2>Página 3</h2> </div>
</header>
<div style="clear:both;"></div>
<nav id="pagina3">
<ul id="menu">
<li><a href="index.html" class="index">index</a></li>
<li><a href="pagina2.html" class="pagina2">pagina2</a></li>
<li><a href="pagina3.html" class="pagina3">pagina3</a></li>
<li><a href="pagina4.html" class="pagina4">pagina4</a></li>
</ul>
</nav>
<div style="clear:both;"></div>
<section class="cuerpo">
<p>Esta es mi página #3</p>
</section>
<footer>
<div class="footer">Mi pie de página</div>
</footer>
</body>
</html>
</html>
*{
font-family:Trebuchet MS,verdana,arial;
margin: 0px;
padding: 0px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu {
margin: 0 auto;
padding: 0px;
list-style-type: none;
}
#menu a {
font-size: 12px;
line-height: 12px;
color: #E1E1E1;
background-color: #1E1E1E;
display: block;
margin-right: 4px;
float: left;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
#menu a:hover {
color: #1E1E1E;
background-color: #E1E1E1;
}
#index #menu li .index,
#pagina2 #menu li .pagina2,
#pagina3 #menu li .pagina3,
#pagina4 #menu li .pagina4{
color: #1E1E1E;
background-color: #E1E1E1;
border: 2px solid #CA464F;
}