Passe o mouse sobre os links
O código completo do menu com tool tip para você copiar-colar modificar e estudar.
Bons estudos e descobertas!
<html>
<head>
<title>Barra de Navegação com tool tip</title>
<style type="text/css">
p.barNav {position:relative;}
.barNav a {
font: 12px Arial, Verdana,Helvetica,sans-serif;
color: #000000;
text-decoration: none;
background: #FFC50C;
text-align: center;
padding: 1px 5px;
margin-right:-1px;
border: 1px solid #000000;
}
.barNav a:hover {
color: #666666;
background: #FCFCFC;
border: 1px solid #666666;
}
.barNav a span {
display:none;
}
.barNav a:hover span {
display: block;
position: absolute;
top:40px;
left:0;
width: 200px;
padding: 2px 0;
color: #666;
background:#fffff0;
font-size: 12px;
border:2px dotted #000;
text-align:center;
}
-->
</style>
</head>
<body>
<h3>BARRA DE NAVEGAÇÃO COM TOOL TIP </h3>
<h3>Passe o mouse sobre os links</h3>
<p class="barNav">
<a href="#" >Home<span>Página de entrada no site</span></a>
<a href="#">Quem somos<span>Conheça nossa equipe.
Profissionais de alto gabarito técnico integram nossos quadros </span></a>
<a href="#">Portfólio<span>Uma coleção de nossos
trabalhos e a opinião de clientes </span></a>
<a href="#">Contato<span>Fale conosco. Sua opinião,
sugestão ou crítica é muito importante para nós. </span></a>
</p>
</body>
</html>