fijate este codigo, si lo modificas un poquito ya tienes lo que quieres:
Código HTML:
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box {
position:absolute; top:50px; left:50px;
z-index:3;}
#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}
#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}
#box a span {display:none;}
#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
</head>
<body>
<div id="box"><a href="#">INFOBOX<span>Lorem ipsum dolor sit amet</span></a></div>
</body>
</html> Esto se ve asi aktuell.de.selfhtml.org/artikel/css/infobox/beispiel1.htm
fuente: aktuell.de.selfhtml.org/artikel/css/infobox/