I have a vertical nav menu on which I want to be able to hover on parent items in order to reveal their children. I’d like the children to “fall” from their parent and “push” the other items in doing so (children aren’t displayed at first).

Here’s my failed attempt on CSS using webkit transitions and translate:

.children a {
  display: none;
  visibility: hidden;
  -ms-transform: translate(0, 50px); /* IE 9 */
  -webkit-transform: translate(0, 50px); /* Safari */
  transform: translate(0, 50px);

  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.page_item_has_children:hover .children a {
  display: block;
  visibility: visible;
}

HTML:

    <nav class="site-nav">
      <li class="page_item page-item-15"><a href="http://localhost:8888/myWebsite/">Home</a></li>
      <li class="page_item page-item-22 page_item_has_children"><a href="http://localhost:8888/myWebsite/About/">About</a>
<ul class='children'>
    <li class="page_item page-item-81"><a href="http://localhost:8888/myWebsite/About/Me">Me</a></li>
    <li class="page_item page-item-83"><a href="http://localhost:8888/myWebsite/About/Us">Us</a></li>
</ul>
</li>
    </nav>

(This is PHP-generated for WordPress).

So what I’d want is for Me and Us to “fall” from About when hover.

I know I used translate wrong because this pushes the children items when I want them to fall where they belong from higher above. I hope I’m being clear. Thanks so much!

Read more here: CSS Smooth drop down menu


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: