michel lompret michel lompret - 1 year ago 209
CSS Question

CSS Alternatives to style=“display:none”

I'm trying to have a fade down animation on menu and submenu but it only works on the first one. I'm using a
transition: all 0.3s ease 0s;visibility: hidden;margin-top:-10px; on nav >div> ul > li > ul and margin-top:0px;opacity: 1;visibility: visible; with hover. The problem comes from

nav li > ul ul {display: none;}
. It seems that CSS can't animate between display: none; and display: block; and i don't know how to replace display: none;

here is the jsfiddle with the display:none and the no animation on the last submenu and here is the jsfiddle with visibility:hidden; the animation works but i've got wired effect

Is there a way to have this animation work on all the submenus ?

Answer Source

Try this, looks like you were one level off:

nav{position: relative;}
nav ul {
  list-style: none;
  padding: 0;
li.has_children > ul{
  transition: all 0.3s ease 0s;
  background-color: green;
li.has_children:hover > ul{
nav > div > ul> li > ul > li > ul{
  /* You may want to add a width */
nav > div > ul > li {
  float: left;
nav >div> ul > li  > a:hover{
  background-color: red;
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<div class="menu-mega-container">
<ul id="menu-mega" class="nav-menu">
        <li><a href="#">My awesome button</a></li>
        <li class="has_children"><a href="#">My awesome button</a>
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li class="has_children"><a href="#">awesome link nº 3</a>
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li><a href="#">awesome link nº 3</a></li>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download