ease in transition of submenu

Question

I am using twenty fourteen theme for my WordPress blog.

It's a travel blog still in development... never mind the content though.

Anyway, I have one sub-menu on the main menu.

The site is: http://www.journeywithandrew.com/

so if you scroll over "WORLD HERITAGE SITES: REVIEWS & INFO" on the menu, you will see a sub-menu appear with two items: "map view" and "list view"

My question is: I am using a css easing-in background effect on the main menu as you can see when you hover over the menu items. However, the sub-menu does not ease in - it just appears.

I would like the sub-menu to also ease in to match the transition time of the main menu (0.3s)

Any ideas? I tried to plug in the CSS code into places using chrome's dev tools, but nothing worked.

thanks!

code:

a {
  -o-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
  -ms-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
  -moz-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
  -webkit-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
  transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
}

Answer 1

css property attibute auto not spported by transition property a nice alternative would be to use opacity

    .primary-navigation ul li:hover > ul, .primary-navigation ul li.focus > ul{
      opacity:1;
    }

    .primary-navigation ul ul{
     transition:all 0.3s ease 0s;
     opacity:0;
    }