| Home | Link 1 | Link 2 | Link 3 | Link 4 |
.navi a:link, .navi a:active, .navi a:visited
{
display: block;
width: 132px;
line-height: 32px;
height: 65px;
text-align: center;
text-decoration: none;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
letter-spacing: 1pt;
font-weight: bold;
color: #fff;
background-image: url('../images/spiegel-button-black.gif')
}
.navi a:hover
{
color: #66CCFF;
background-image: url('../images/spiegel-button-black-hover.gif')
}
.navi
{
margin: 5px 0 20px 0
}
<html>
<head>
<title>horizontale Rollover-Navigation</title>
<link rel="stylesheet" type="text/css" href="css/navi.css">
</head>
<body>
<table class="navi" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Link 1</a></td>
<td><a href="#">Link 2</a></td>
<td><a href="#">Link 3</a></td>
<td><a href="#">Link 4</a></td>
</tr>
</table>
</body>
</html>
Beispiel incl. CSS-Datei und Grafiken downloaden!