Delay op display, visibiliy en opacity

[supervinnie40]

Ik heb een Wordpress site waar een menu op draait. Dit menu bestaat uit UL en LI items.
Onder een LI item staat een DIV met de volgende CSS:

code:

visibility: hidden;
    opacity: 0;
    display: none;

Wanneer men hovered over het LI item, dan geldt de volgende CSS:

code:

visibility: visible;
    opacity: 1;
    display: block;

Dit werkt prima, maar omdat het paneel dat bij hover zichtbaar wordt redelijk groot is, zou het fijn zijn als er een seconde delay zit op het effect. Op die manier kun je met de muis over het menu-item gaan zonder dat onmiddellijk het paneel zichtbaar wordt.

Ik heb al zitten experimenteren met transition en transition-delay, maar daarmee vertraagd het uitklappen alleen maar. Als je namelijk over het menu-item gaat, en vervolgens de muis naar beneden beweegt, dan staat de muis op de plek waar het paneel over enkele seconden zichtbaar wordt. Zolang je muis daar staat, gaat de transition gewoon door. Je kunt het alleen voorkomen door de muis juist omhoog te bewegen.
En dat is nou net wat ik probeer op te lossen door een vertraging in te bouwen.

Waarschijnlijk hebben jullie iets meer info nodig, maar ik weet niet precies wat.

[Woy]

Visibility is geen property die animatie support. Je kunt wel de size animeren.