Problem mit hover effekt bei submenü!

[Fr3ddy]

Hi,

ich habe ein menü mit einem sub menü, mein problem ist nur, dass submenü wird nur dann angezeigt wenn der jewilige menüüberpunkt aktiv ist und nicht, wenn ich über den mmenüüberpunkt einfach mit der maus drüber gehen.

Hier mal das css:

#navi #left ul li a{
    color:#FFF;
    text-decoration:none;
    font-weight:bold;
    display:block;
    height:101px;
    width:176px;
}
#search label{
    display:none;
}
#navi #left ul li.item3.active{
    line-height:202px;
    background-image:url(../images/allgemeines-active.png);
    height:125px;
    background-repeat:no-repeat;
}
#navi #left ul li.item4.active{
    line-height:202px;
    background-image:url(../images/standort-active.png);
    height:125px;
    background-repeat:no-repeat;
}
#navi #left ul li.item5.active{
    line-height:202px;
    background-image:url(../images/medien-active.png);
    height:125px;
    background-repeat:no-repeat;
}
#navi #left ul li.item6.active{
    line-height:202px;
    background-image:url(../images/wiki-active.png);
    height:125px;
    background-repeat:no-repeat;
}


#navi #left ul li.item3:hover{
    line-height:202px;
    background-image:url(../images/allgemeines-active.png);
    height:125px;
    background-repeat:no-repeat;
}
#navi #left ul li.item4:hover{
    line-height:202px;
    background-image:url(../images/standort-active.png);
    height:125px;
    background-repeat:no-repeat;
}
#navi #left ul li.item5:hover{
    line-height:202px;
    background-image:url(../images/medien-active.png);
    height:125px;
    background-repeat:no-repeat;
}
#navi #left ul li.item6:hover{
    line-height:202px;
    background-image:url(../images/wiki-active.png);
    height:125px;
    background-repeat:no-repeat;
}
#navi #left ul li ul{
    visibility:hidden;
}
#navi #left ul li:hover > ul{
    width:200px;
    min-height:300px;
    position:absolute;
    top:121px;
    visibility:visible;
}
#navi #left ul li.parent ul li ul{
    visibility:hidden;
}
#navi #left ul li ul li.parent:hover > ul{
    width:200px;
    min-height:300px;
    position:absolute;
    top:0px;
    left:176px;
    visibility:visible;
}
#navi #left ul li ul li{
    width:176px;
    height:30px;
    text-align:left;
    background-image:url(../images/menuitem_background.png);
    display:block;

}
#navi #left ul li ul li a{
    width:176px;
    height:30px;
    display:block;
    font-weight:100;
    line-height:28px;
    padding-left:10px;
}
#navi #left ul li ul li a:hover{
    background-image:url(../images/menuitem_background.png);
    width:166px;
    height:30px;
    display:block;
}

#navi #left ul.menu{
    position:relative;
}
#navi #left ul li ul.parent{
    background-image:url(../images/background_parent.png);
    background-repeat:no-repeat;
    background-position:right;
    z-index:1000;
}

 

[prm]

Vertausche mal die Reihenfolge in den CSS-Angaben:
Zuerst die hover-Angaben und danach die active-Formatierungen.
Siehe hier Ziffer 8: Häufige CSS-Fehler