a:hover mit "verschachtelter" CSS Klasse

[Cssler]

Hallo Ralf

Vielen Dank für deine Antwort. Das habe ich mir eben auch gedacht.

Ich habe aus dem Div nun ein Span-Element gemacht, und dieses in den Link integriert.
Was ich eben versuche zu machen, ist ein aufklappbares Menü, dass ohne JavaScript funktioniert. Ist freaky aber funktioniert so.
Es gibt dabei nur 2 Probleme:
a) Zurzeit sieht man den Link innerhalb des Spans nicht. Mal gucken, ob ich das noch hinkriege. Das wäre natürlich ein Must-Have/Voraussetzung.
b) es geht nur als Alternative zu Javascript. Also wenn jemand JavaScript deaktiviert hat. CSS muss dafür entsprechend via <noscript> eingebunden werden. Der Grund dafür ist, dass es "nur via CSS" sehr Maus-Sensitiv ist. Es funktioniert zwar, aber man muss sehr ruhig über den (ersten) Link fahren. Und welcher Internet User ist schon nicht wild und ungeduldig am herumklicken ;-D

Vielleicht habt ihr zu den beiden Punkten noch Inputs. Ich kann eben leider nicht dass Span-Element unter den Link legen (trotz z-index). Ich denke, dass liegt daran, dass es Teil des Links ist.

Hier noch meine Codes:

  
<nav id="main">  
<a href="" accesskey="1" title="">Ausgangslage<span class="subnav"><a href="" class="a">asdasd</a><span></a>  
</nav>  

  
#main{background-color: #000; width: 59.2em; font-size:1em; color:#fff; height:1.6em; z-index:2; vertical-align: baseline; text-align:center; padding:0.2em 0.4em 0em 0.4em; margin:0em 0em 0em 0em; display: block;}  
#main a{margin:0em 0.8em 0em 0.8em;font-weight:bold; color:#fff; text-decoration:none; z-index:5;}  
#main a:hover{color: #99ccff;}  
#main {position: relative; top:0em; }  
  
#main a .subnav, .a  {display: none;}  
#main a:hover .subnav   {display: block; position:absolute; top: 0.1emem; width: 10em; height: 3em; background-color: #000; z-index:2; color:#FFF;}  
#main a:hover .subnav  .a  {display: block; position:absolute; width: 10em; height: 3em;  z-index:4; color:#FFF;}  
#main a:hover .a  {color:#FFF; display: block; z-index:3;}  
#main a:hover .a:hover   {color:# F00; display: block;}  
  

P.s. ist eigentlich erstaunlich, dass so viel überhaupt geht.... :-) I love CSS :)