HTML/CSS MouseOver

[neicooo]

Ich habe folgende Problematik. Eines vorneweg, ich beschäftige mich erst wenige Wochen mit dem ganzen Thema, ich habe auch schon mehrere Sachen rumprobiert, ich komme aber auf keine Lösung.

Ich würde gerne in einem Feld, welches bei Mouseovver erscheint eine Liste oder auch verschiedene Absätze oder Überschriften einfügen, aber irgendwie bekomme ich das nicht wirklich hin.

Den Mosueover mit einem normalen Text bekomme ich hin und zwar so:

HTML:

 <p class="popup">Hier soll ein PopUp erscheinen  
<span>test</span>  
  
<p>

CSS:

p.popup  
{  
position:relative;  
z-index:1;  
}  
  
p.popup:hover  
{  
z-index:2;  
}  
  
p.popup span{  
display: none;  
}  
  
p.popup:hover span  
{  
display:block;  
position:absolute;  
top: 30px;  
left: 0px;  
} 

Möchte ich aber jetzt in dem Popup mehr als nur einen einfachen Text habe, funktioniert mein Mouseover nicht mehr wie gewollt, wo liegt mein Fehler?

HTML:

<p class="popup">Hier soll ein PopUp erscheinen  
<ul>  
<li>Punkt1</li>  
<li>Punkt2</li>  
</ul>  
<p>

CSS:

p.popup {  
position:relative;  
z-index:1;  
}  
  
p.popup:hover {  
z-index:2;  
}  
  
p.popup ul {  
display: none;  
}  
  
p.popup:hover ul {  
display:block;  
position:absolute;  
top: 30px;  
left: 0px;  
} 

Was mache ich falsch?