CSS-Menü funktioniert nicht

[nick]

Tach.

Versuche mich gerade an einem dynamischen CSS-Menü. Bisher bin ich im Besitz folgenden Quellcodes:

  
 <ul class="nav">  
  <li class="sup">Ueberschrift1</li>  
  <li class="sub">Unterschrift1.1</li>  
  <li class="sub">Unterschrift1.2</li>  
  <li class="sub">Unterschrift1.3</li>  
 </ul>  
 <ul class="nav">  
  <li class="sup">Ueberschrift2</li>  
  <li class="sub">Unterschrift2.1</li>  
  <li class="sub">Unterschrift2.2</li>  
  <li class="sub">Unterschrift2.3</li>  
  <li class="sub">Unterschrift2.4</li>  
 </ul>  

  
li{ list-style:none; }  
  
ul{  
 float:left;  
 margin-top:-1px;  
}  
  
  
.sup{  
 border:1px solid #000;  
 font-weight:bold;  
}  
.sub{  
 visibility: hidden;  
}  
  
.sup:hover .sub{  
 visibility: visible;  
}  

Eine Frage hätte ich jetzt: Warum funktioniert das nicht? Wenn ich "visibility" mit "display" ersetze, dann verändert sich nichts...

danke, euer nick