En CSS, nous allons utiliser la balise <a> à laquelle nous intégrerons la balise <span> que nous allons masquer et afficher grâce à l'attribut "display: none;" et "display: block;"

Note : /* commentaires et/ou explications */

Code CSS :

<style type="text/css">

   body{font-family: arial;}     /* police du document */        

   ul{

      list-style-type: none;     /* On enlève les puces de liste */

      margin:0;

      padding:0;

      position: absolute; 

      top: 2em;     /* positionnement du menu */

      left: 3em;

      width: 100%;     /* précision pour Opera */

   }

   li{float: left;}

   .menu a     /* définition de chaque bouton du menu */

   {       

      width: 100px;     /* largeur du bouton */

      height: 20px;

      float: left;

      display: block;

      text-align: center;     /* On centre le texte */

      border: 1px solid #fff;     /* Ajout d'une bordure blanche */

      text-decoration: none;     /* texte sans décoration */

      color: #000;     /* couleur du texte */

      background: #fff;     /* couleur de fond blanche */

   }

   .menu a:hover{

      color: #411;     /* couleur de l'écriture */

      background: deeppink;   /* couleur de fond */

      border: 1px solid lightgray; 

      border-bottom: 0px;

      color: #fff;

   }

   .menu a span {display: none;}   /* définition de la balise <span> inclue dans <a> */

   .menu a:hover span    /* définition de la balise <span> au survol */

   {   

      display: block;

      position: absolute;

      top: 20px;

      left: 0;

      width: 600px;   /* largeur de la zone de commentaires */

      text-align: left;

      border-top: 1px solid deeppink ; /* bordure en haut du texte */

      color: gray;   /* couleur de la police */

   }      

</style>

Et voilà le code XHTML

<div id="menucomplet">

   <ul class="menu">        

      <li>

         <a href="">

            Menu 1

            <span>

               Voici le premier onglet.           

               Lorem Ipsum blablabla bla bla bla

            </span>

         </a>

      </li>        

      <li>

         <a href="">

            Menu 2

            <span>

               Onglet #2 avec du texte 

               blabalbal

            </span>

         </a>

      </li>          

      <li>

         <a href="">

            Menu 3

            <span>

               And the number 3!! 

            </span>

         </a>

      </li>           

      <li>

         <a href="">

            Menu 4

            <span>

               Et le ptit dernier!

            </span>

         </a>

      </li>   

   </ul>

</div>

(Inspiré librement de http://www.meyerweb.com/eric/css/edge/popups/demo.html