Hola, me podrían ayudar a modificar una barra de navegación, ya está fija, estoy usando HTML y CSS, quisiera que al pasar el puntero del ratón sobre los enlaces de la barra estos cambien a un color más oscuro, un buen ejemplo es la barra de Apple:
[URL="http://www.apple.com/mac/"]http://www.apple.com/mac/[/URL] (al pasar el puntero por los enlaces cambian, y parecen que se les estuviera hundiendo a manera de botón)
Mi código actual:
main.css (documento CSS)
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: "Trebuchet MS";
font-size: 12px;
font-weight: bold;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 20px;
text-align: right;
padding-top: 12px;
padding-bottom: 8px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 4px 0px #000000;
-moz-box-shadow: 0px 0px 4px 0px #000000;
box-shadow: 0px 0px 4px 0px #000000;
/* Adds the transparent background */
background-color: rgba(15, 77, 146, 1);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 7px;
padding-right: 7px;
color: #edf3ff;
text-decoration: none;
}
#navigation a:hover {
color: white;
}
archivo.html (documento HTML)
<body>
<div id="navigation">
<a href="http://www.google.es">Barra de navegación</a>
</div>
Gracias a todos.