michel lompret michel lompret - 4 months ago 39
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

Try this, looks like you were one level off:

nav{position: relative;}
nav ul {
  list-style: none;
  margin:0;
  padding: 0;
}
li.has_children{
  position:relative;
}
li.has_children > ul{
  transition: all 0.3s ease 0s;
  visibility:hidden;
  margin-top:-10px;
  opacity:0;
  background-color: green;
}
li.has_children:hover > ul{
  margin-top:0px;
  visibility:visible;
  opacity:1;
}
nav > div > ul> li > ul > li > ul{
  position:absolute;
  top:0;
  left:100%;
  /* 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>
            <ul>
                <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>
                <ul>
                <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>
            </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</nav>
</div>