Ciao a tutti, ho realizzato un semplice menu con tendina che si attiva al passaggio del mouse.

Riporto di seguito il codice, preciso che la parte HTML non la vedrete perché è sostituita dal codice Wordpress, mentre la parte CSS è "standard":

codice:
      <?php /* Main Navigation */        wp_nav_menu( array(
          'theme_location' => 'header',
          'depth' => 2,
          'container' => false,
          'menu_class' => 'header__menu'
          )
        );
      ?>
codice:
.header__menu {float: right; margin-top: 70px; list-style-type: none; letter-spacing: 2px;}.header__menu .menu-item {display: inline-block;}
.header__menu .menu-item a {padding: 10px 10px; color:#fff; text-decoration: none; }
.header__menu .menu-item-has-children:hover .sub-menu { position: absolute; padding-top: 12px; display: block; }
.header__menu .menu-item .sub-menu { display: none; z-index: 1; text-decoration: none; list-style-type: none; }
.header__menu .menu-item .sub-menu a:hover { background-color: #888888; }
.header__menu .menu-item .sub-menu li { display: block; background-color: #627f9b; border-bottom-style: solid; border-width: 1px; border-color: #000; border-right-style: solid; border-left-style: solid; }
.header__menu .menu-item .sub-menu li a { display: block; color: #fff;}
In pratica, tramite la funzione "hover", quando con il mouse passo su una voce del menu che contiene sub-menu (contrassegnata dalla classe ".menu-item-has-children:"), appare la tendina contrassegnata dalla classe "sub-menu".

Ora, vorrei inserire una semplice animazione js, ma fino a questo momento non ci sono riuscito.

Questo è quello che ho tentato di fare:

1) Ho inserito nella classe ".header__menu .menu-item .sub-menu" la seguente parte di codice:
codice:
		-webkit-transition: all 0.3s ease-out;
						transition: all 0.3s ease-out;
2) Ho aggiunto, nel file dedicato agli js di Wordpress, il seguente codice:

codice:
(function($) {

	$(".menu-item-has-children__icon-bar").hover(function(e){
		 $(".header__menu").toggleClass('sub-menu');
		 e.preventDefault();
	});


})( jQuery );
Purtroppo non funziona.

Sicuramente sbaglio qualcosa, mi potete dare una mano?

Grazie!