CSS transition

Bonjour, je suis actuellement en train de faire un site qui comporte de menus déroulant, et j'ai essayer d'appliquer un effet de transition de CSS3 sur les menus afin de faire un petit effet de fondu au survol. Le probléme et que l'effet de transition ne se fait que quand on survol le sous-menu, pas le bouton qui l'affiche. J'ai prévue a cette effet un page test car je ne pense pas être très clair : http://socato.fr/Test/.

J'ai bien trouver un moyen qui est de mettre un <li> sous le bouton mais cela pose pas mal de probléme selon les navigateur, et le bouton n'est plus cliquable et je trouve que cela fait un peu lourd.

Merci d'avance .