<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>PRO.HTML.it - CSS Rollover - Orizzontale</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.bordotab {
font-family: Verdana, Arial, Helvetica, sans-serif; /* Definisce il font */
font-size: 12px; /* Dimensione del fon */
color: #000000; /* Colore del font */
background-color: #FFFFCC; /* Colore di sfondo della tabella */
border-top-width: 1px; /* Qui definiamo il bordo esterno della tabella */
border-bottom-width: 1px; /* Il bordo destro e quello interno */
border-left-width: 1px; /* saranno quelli delle celle */
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.classetd {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFCC;
border-right-width: 1px; /* Come si può notare, per le celle definiamo solo il bordo destro */
border-right-style: solid;
border-right-color: #000000;
}
.classetd a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000099; /* Questo è il colore del link */
display: block; /* Fondamentale! Da impostare sempre */
position: relative; /* Fondamentale! Da impostare sempre */
text-decoration: none; /* Eliminiamo la sottolineatura del link */
}
.classetd a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CC0000; /* Cambiamo il colore del link al passaggio del mouse */
background-color: #CCFFFF; /* Cambiamo il colore di sfondo al passaggio del mouse */
text-decoration: none;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="1" cellspacing="0" class="bordotab">
<tr>
<td class="classetd"><center>
<a href="#">Menu 1</a>
</center></td>
<td class="classetd"><center>
<a href="#">Menu 2</a>
</center></td>
<td class="classetd"><center>
<a href="#">Menu 3</a>
</center></td>
<td class="classetd"><center>
<a href="#">Menu 4</a>
</center></td>
<td class="classetd"><center>
<a href="#">Menu 5</a>
</center></td>
</tr>
</table>
</body>
</html>
|