Expand submenu from top instead of dropdown

Question

I have a "standard" nav menu which displays submenu under it on hover, like this https://jsfiddle.net/z6vur05u/

Instead of dropdown under the menu, i would need the submenu to be pushed from top the page while moving navigation down. Closest example of this would be here http://callmenick.com/_development/slide-push-menus/ (top effect), but i simply couldnt make it work..

Code is very simple and cleaned version is here:

<div id="menu-wrapper">

  <ul class="nav">
    <li>
      <a href="#">Parent</a>
      <div>
        <div class="nav-column">
          Submenu lists here
      </div>
    </li>
    <li>
      <a href="#">Parent</a>
      <div>
        <div class="nav-column">
          Submenu lists here
      </div>
    </li>
    <li>
      <a href="#">Parent</a>
      <div>
        <div class="nav-column">
          Submenu lists here
      </div>
    </li>
    <li><a href="#">Parent</a></li>
    <li><a href="#">Parent</a></li>
    <li><a href="#">Parent</a></li>
  </ul>

</div>

If anybody can help out, it would mean a lot! I played with absolute/relative positioning but i didnt get far, so any help would be greatly appreciated!

Answer 1

Ok, I've added a few lines of CSS and the result can be seen here.

CSS

.nav > li > div {
    [..]
    height: 0; /*added a height*/
    [..]
    top: 0px; /*changed this from 50 to 0*/
    [..]
}

.nav > li { /*completely new selector, but probably already available somewhere*/
    margin-top: 0; /*since the menu has to start at the top*/
    transition: margin-top .3s ease .15s;/*same animation as the rest, but only margin-top*/
}

.nav:hover > li { /*completely new selector, but probably already available somewhere*/
    margin-top: 250px;/*same height as the menu*/

}

.nav > li:hover > div {
    [..]
    height: 250px; /*so it animates from 0 to 250px*/
}

With this, you are off to a good start. You just have to add some jQuery or JS that checks if a menu-point has a submenu. If yes, add the hover-stuff, if no, don't. Now it runs the effect on hover of every menu-point.