CSS Problema com "fade in out"

[Lerub]

Eu  não estou conseguindo fazer o fade-in-out no background do submenu. O fade parece funcionar bem com a tag <a> mas não funciona com a <li>.

 

Segue os códigos:

 

.theblogmenu {
position:relative;
left:16%;
width:63%;
}

.theblogmenu ul {
    list-style:none;
    margin:0;
    padding:0;
}

.theblogmenu ul:before,.theblogmenu ul:after {
    content:"";
    display:table;
}
.theblogmenu ul:after {
    clear:both;
}
.theblogmenu ul > li {
    float:left;
    position:relative;
}
.theblogmenu a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    text-decoration:none;
font-weight:bold;
color:     #ffbc69;

font-size:233%;
}
.theblogmenu a:hover {
    text-decoration:none;
    background:#595959;

}
.theblogmenu li ul {
    background:rgba(130,130,130,0.86);
  position:absolute;
    left:0;
    top:64px;
    z-index:1;
}
.theblogmenu li ul li {
    width:auto;
 overflow:hidden;
    height:0;

}
.theblogmenu li ul a {
    border:none;
transition:background ease;
}
.theblogmenu li ul a:hover {
    background:rgba(255,181,197,0.2);

}

.theblogmenu ul > li:hover ul li {
    height:auto;
font-size:63%;
transition:background 0.635s;

}

 

 

        <div class="theblogmenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/artigos/blog/parceria">Parceria</a></li>
<li><a href="#">Mais</a>
<ul class="dropdown-content">
<li><a href="/artigos/blog/category/musica">Musica</a></li>
<li><a href="/artigos/blog/category/filme">Filmes</a></li>
<li><a href="/artigos/blog/category/serie">Séries</a></li>
    <li><a href="/artigos/blog/category/animacao">Animação</a></li>
    <li><a href="/artigos/blog/category/origem">Origem</a></li>
    <li><a href="/artigos/blog/category/suite">Suíte</a></li>
    <li><a href="/artigos/blog/category/suitenews">Suítenews</a></li>
    <li><a href="/artigos/blog/category/art">Art</a></li>
    <li><a href="/artigos/blog/category/cinema">Cinema</a></li>
</ul>
</li>
    
</ul>
</div>

[GabrielSennaMs]

@Lerub 

 

Na class ".theblogmenu ul > li:hover ul li" você especifica que a propriedade que vai receber o efeito de transition é a propriedade background, porém você só manipula as propriedade font-size e height.

 

Para resolver isso basta modificar a propriedade que vai receber o efeito de transition

 

de:

transition: background 0.635s;

para:

transition: font-size 0.635s;
-o-transition: font-size 0.635s;
-moz-transition: font-size 0.635s;
-webkit-transition: font-size 0.635s;

Não é necessário especificar a propriedade de transition, assim todas as propriedade vão receber o efeito de transiiton

transition: 0.635s;
-o-transition: 0.635s;
-moz-transition: 0.635s;
-webkit-transition: 0.635s;

 

[Lerub]

Só uma correção. O efeito que eu quero é na transparencia (opacity). Mas só funcionou nos links.

 

Edit:

 

Bem... chegamos em algum lugar...

.theblogmenu {
position:relative;
left:16%;
width:63%;
}

.theblogmenu ul {
    list-style:none;
    margin:0;
    padding:0;
}

.theblogmenu ul:before,.theblogmenu ul:after {
    content:"";
    display:table;
}
.theblogmenu ul:after {
    clear:both;
}
.theblogmenu ul > li {
    float:left;
    position:relative;
}
.theblogmenu a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    text-decoration:none;
font-weight:bold;
color:     #ffbc69;

font-size:233%;
}
.theblogmenu a:hover {
    text-decoration:none;
    background:#595959;

}
.theblogmenu li ul {
    background:transparent;
  position:absolute;
    left:0;
    top:64px;
    z-index:1;
transition:0.635s;

}
.theblogmenu li ul li {
    width:auto;
 overflow:hidden;
    height:0;
 
}

.theblogmenu ul > li ul:hover {
  background:rgba(130,130,130,0.86);
transition:ease;
}

.theblogmenu li ul a {
    border:none;


}
.theblogmenu li ul li a:hover {
    background:rgba(255,181,197,0.2);

}


.theblogmenu ul > li:hover ul li {
transition:ease;
   height:auto;
font-size:63%;

}

Edit2:

Temos um resultado satisfatório!

 

https://pastebin.com/uWzpiGB1

 

Eu só não consegui fazer o fade-out.