Fade in dropdown

Question

I have tried everything but can't seem to get the drop down to fade in. Is it possible to fade in the .submenu in using CSS? I have no idea why it's not working with the usual "transition" css. Here is the below http://jsfiddle.net/aAXwr/

<ul id="main-menu">

<li><a href="<txp:site_url />" style="background-image:none;">Home</a></li>

<li><a href="<txp:site_url />about">About</a>

<ul class="sub-menu">
<li><a href="<txp:site_url />">About&#160;Us</a></li>
<li><a href="<txp:site_url />">Our&#160;journey</a></li>
<li><a href="<txp:site_url />">Our&#160;partnerships</a></li>
<li><a href="<txp:site_url />">Our&#160;values</a></li>
</ul>
</li>

<li><a href="<txp:site_url />switching">Switching</a>

<ul class="sub-menu">
<txp:article_custom form="menu_listing" pgonly="0" section="switching" sort="Posted asc" />

</ul>

</li>

</ul>

Here is my CSS

#main-menu {
    float: left;
    font-size: 0;
    margin: 15px 0;
}

#main-menu > li {
    display: inline-block;

}



#main-menu > li > a {
    color: #eee;
    font-size: 18px;
    line-height: 14px;


  background:url('http://plymouthenergycommunity.org.uk.s171938.gridserver.com/images/12.jpg') no-repeat top left;
    padding-left: 15px;
height:40px;
display:block;
padding-right:2px;

}

#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
    color: #ffb612;

}

#main-menu li {
    position: relative;
z-index:7000;


}





ul.sub-menu { 

        background:#fff;
        display:none;
        height:auto;
        color:#000;
        margin:0px;
        border:0px;
        position:absolute;
        width:150px;
        z-index:200;
        -moz-box-shadow:    2px 2px 5px 2px #000;
        -webkit-box-shadow: 2px 2px 5px 2px #000;
        box-shadow:         2px 2px 5px 2px #000;
        /*top:1em;
        /*left:0;*/


        }





ul.sub-menu ul.sub-menu { /* level 3+ */
    margin-top: -1px;
    padding-top: 0;
    left: 149px;
    top: 0px;
}

ul.sub-menu > li > a {


    color: #29225c;
    display: block;
    font-size: 16px;
    line-height: 16px;
padding-left:10px;

}

ul.sub-menu > li > a:hover { 
    color: #000;

}






ul.sub-menu > li:first-child {
padding-top:10px;
}

ul.sub-menu ul.sub-menu > li:first-child {


}

ul.sub-menu > li:last-child > a {
padding-bottom:10px;
}

ul.sub-menu > li > a.parent {
    background-image: url(../images/arrow.png);
    background-size: 5px 9px;
    background-repeat: no-repeat;
    background-position: 95% center;
}

#main-menu li:hover > ul.sub-menu {
    display: block; /* show the submenu */

}

Answer 1

You can use opacity instead of display:

ul.sub-menu { 
    display:block;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

#main-menu li:hover > ul.sub-menu {
    opacity: 1;
}

Here's a Fiddle

Answer 2

You want transitions. The main mistake people do for transitions is to use the display propert, which can not be used for transition.

Try this:

ul.sub-menu 
{
    display:block;
    visibility: hidden;
    opacity: 0;
    transition-property(opacity);
    transition-duration(0.8s);

}

#main-menu li:hover > ul.sub-men
{
   opacity: 1;
   visbility: visible;
}