Suche Hilfe bei Hover Menü

Servus ihr lieben.

Ich bastel momentan an einer Homepage und ich habe Probleme sie so umzusetzten wie ich das möchte^^

So sieht bei mir die Navigation aus:

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

Ich habe ganz oben auf der Homepage ein DIV mit dem Bild als Background. Die Menüpunkte+Einlogg Felder habe ich mit Hilfe einer Tabelle in dem Stil getrennt:

{[Übersicht][Event][Einlogzeug][Multimedia][Turniere]}

Nun habe ich unter der Tabelle bzw unter dem DIV ein weitern DIV, das ein aufklappbares Menü werden soll.
Sprich: Wenn man mit der Maus über "Übersicht" geht soll der DIV erscheinen.

Mein Problem: Es will nicht -.-!

HTML Code:

<a href="#" class="hover" onMouseOver="uebersichtA()" onMouseOut="out()">Übersicht</a>   
.
.
.
.
<div class="menu"> </div>

CSS:

.menu
    {
    background: transparent url(../Bilder/menu.png);
    position: relative;
    width: 830px;
    height: 33px;
    margin-top: -51px;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    opacity: 0;
    overflow: hidden;
    }


.hover:hover +.menu 
    {
    opacity: 1;
    }

Wenn ich den DIV des Untermenüs genau unter dem Link von "Übersicht" mache, dann geht es aber wenn ich den DIV ans Ende der Tabelle schiebe, gehts nicht -.-

Ich habe auch schon simpel mit "visibility: hidden" und "visible" oder "display: none" und "block" probiert doch da ists genau das selbe.

Hoffe mir kann jemand helfen :(

Grüße,
Ranox

#push