CSS Smooth drop down menu

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

Leave a Reply

Your email address will not be published. Required fields are marked *