.navi a:link, .navi a:active, .navi a:visited
{
display: block;
width: 125px;
line-height: 35px;
text-decoration: none;
font-family: Tahoma, Arial, Verdana;
font-size: 14px;
letter-spacing: 1pt;
font-weight: bold;
color: #fff;
text-align: center;
background-image: url('../images/button.jpg')
}
.navi a:hover
{
color: #ccc;
background-image: url('../images/button-hover.jpg')
}
<html> <head> <title>vertikale Navigation</title> <link rel="stylesheet" type="text/css" href="css/navi.css"> </head> <body> <div class="navi"> <a href="#">Home</a> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> </body> </html>
Beispiel incl. CSS-Datei und Grafiken downloaden!