:: Construa um menu CSS com ToolTip ::
Passe o mouse sobre o menu
Abaixo o código da folha de estilo do menu com ToolTip
ul#menutt {
width: 160px;
list-style:none;
font: bold 16px Arial, Verdana, Serif;
}
ul#menutt li{
position:relative;
}
ul#menutt a {
width: 160px;
display: block;
text-align:left;
padding: 5px 10px;
margin-bottom:1px;
text-decoration: none;
color: #000;
background: #1cd117;
border-left: 12px solid #05a22e;
border-right: 3px solid #05a22e;
voice-family: "\"}\"";
voice-family:inherit;
width:125px;
}
>#pagebody>ul#menutt a {
width:125px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menutt li { float: left; height: 1%; }
* html ul#menutt li a { height: 1%; }
/* End */
ul#menutt a:hover {
color: #fff;
background: #2aec09;
border-right: 3px solid #17c71c;
border-left: 12px solid #17c71c;
}
ul#menutt a span {
display: none;
}
ul#menutt a:hover span {
display: block;
position: absolute;
top:0;
left: 160px;
width: 130px;
padding: 5px;
margin-left:2px;
color: #fff;
background:#060;
font-size: 10px;
text-align:left;
border:1px solid #000;
}Abaixo o código HTML do menu com ToolTip
<ul id="menutt">
<li>
<a href="#">Home
<span>
Página de entrada no site CSS para Web Design
um site projetado com folhas de estilo em cascata.
</span>
</a>
</li>
<li><a href="#">Tutorial CSS
<span>
Nesta seção do site você encontrará
uma série de tutoriais sobre as mais variadas
técnicas de CSS para construção de
páginas web.
</span>
</a>
</li>
<li>
<a href="#">PDA 320x240
<span>
Neste link você verá como CSS pode
ser utilizada para possibilitar exibir sua página
web de maneira legível em um dispositivo PDA.
</span>
</a>
</li>
<li>
<a href="#">Links
<span>
Uma coletânea de links para sites sobre CSS.
</span>
</a>
</li>
<li>
<a href="#">Mapa do site
<span>
Mapa do site - Aqui você encontra uma
relação completa de todas as páginas do site.
</span>
</a>
</li>
<li>
<a href="#">Contato
<span>
Entre em contato conosco!
Sugestões serão muito bem vindas.
Se você tem uma matéria sobre CSS
e quer colaborar, publicaremos.
</span>
</a>
</li>
</ul>
Última modificação: 2006/08/30 15:05:29 GMT
Atualizado em : 2006-01-17
