CSS 3 Transition effect

Question

I am working on CSS 3 transition effect for navigation menu.I want to have opacity effect for the submenu on hover of the menu.And Its working.

But the problem is that I want to show submenu on hover of menu item.But in my case with the following code, submenu is opacity effect works on hover of submenu as well.

    #mega-menu-wrap-primary-2 #mega-menu-primary-2 > li.mega-menu-megamenu > ul.mega-sub-menu {opacity:0 !important;
    display:inline !important;
     transition: opacity 1s ease-in-out;
    -webkit-transition:opacity 1s ease-in-out;
    -moz-transition:opacity 1s ease-in-out;
    -o-transition:opacity 1s ease-in-out;} 
    /*for transition*/
    #mega-menu-wrap-primary-2 #mega-menu-primary-2 li {}

    #mega-menu-wrap-primary-2 #mega-menu-primary-2 > li.mega-menu-item:hover > ul.mega-sub-menu {
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition:opacity 1s ease-in-out;
        opacity:1 !important;}

NOTE: I am having submenu with 660px height.And also I am using wordpress.So I can't show you on JSFiddle.

What might be the issue here ?

Tell me if you have doubt related to this question.Thanks.