Fade in dropdown

Question

Я пробовал все, но не могу, похоже, получить падение вниз, чтобы исчезнуть. Возможно ли исчезнуть в .submenu при использовании CSS? Я понятия не имею, почему он не работает с обычным «переходным» css. Вот ниже 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> 

Вот мой 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

Вы можете использовать opacity вместо 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

Вы хотите переходы. Основная ошибка, которую люди совершают для переходов, - использовать свойство display, которое не может быть использовано для перехода.

Попробуйте это:

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; 
}