Barre de Menu avec <span> dans <a>

Bonjour.

J'ai essayé de reproduire un exemple du livre CSS 2, pratique du design web (Ch 11 p.151...) ou il est question de faire un menu, et d'afficher des information au passage de la souris sur le nom du menu.
pour cela : le code html suivant est necessaire :

<ul id="menu">
<li><a href="saisie_ref_produit.php">Saisie d'une référence de produit <span>Cette rubrique vous permet de saisir une nouvelle référence de glace ou de patisserie.</span></a></li>
<li><a href="edit.php">Edition de catalogue de produit <span>Dresser une liste de produits triée par type de produit</span></a></li>
<li><a href="search.php">Recherche glace / Patisserie <span>Saisissez n'importe quel critère de recherche et vous pourrez trouver un produit rien qu'en indiquant son prix. Cette option vous permet également de modifier un produit une fois que celui ci est trouvé.</span></a></li>
<li><a href="#" onClick="window.close();">Quitter !</a></li>
</ul>

du coté des CSS :

ul{
list-style-type:none;
margin: 0;
margin-top : 90px;
padding : 0;
position :relative;
width  : 100%;
}

li{
float : left;
border-bottom : 1px solid black;
}

#menu a{
position : relative;
width : 15.4em;
height : 20px;
float : left;
display : block;
text-align : center;
border: 1px solid #fff;
text-decoration : none;
color : #000;
background : #ffcc66;
}

#menu a:hover{
color: #411;
background : #ffaa66;
border : 1px solid #ffcc66;
border-bottom : 1px solid #555;
}

#menu a span{
visibility : hidden;
margin : 0;
padding: 0;
display : block;
top : 25px;
position : relative;
}

#menu a:hover span{
visibility : visible;
background:none;
display : block;
position :relative;
top :25px;
margin : 0;
padding: 0;
left : auto;
width : 250px;
text-align : justify;
color :#000;
}

Le problème est que : Lorsque que j'ajoute un <p> en dessous du </ul>, il me l'affiche juste en dessous de la barre de menu, c'est a dire : au dessus des span

alors que normalement avec la propriété visibility : hidden, il devrait me laisser un espace blanc puis m'afficher mon <p> (si aucun lien n'est survolé)

Comment resoudre ?

merci !

voila l'exemple ded ce que je veux faire :
http://css.alsacreations.com/xmedia/exemples/commentaires/cssmenu1.htm

sauf que moi je veut rajotuer des truc en dessous est pas en valeur absolu... qu'il se mettent en dessous des commentaire automatiquement ...