Hide submenu behind main nav?

Question

I am trying to create a submenu transition that is smooth and neat. I am running into some trouble figuring out the best way to approach this.

Here is the basic menu structure.

What I was is for the submenu to not display and then 'grow' into the main nav. This is how I want the menu to appear whilst hidden. As you can see the header collapses and the submenu is out of sight.

Unfortunately one can not transition the display property, so I have been trying a few techniques. So far, this is the closest I have come to the desired result. As you can see this is not optimal, the submenu is just sitting on top of the main nav.

Is there any way to hide the submenu behind the main nav or a better way to approach this?

Answer 1

your link to http://jsfiddle.net/3dX3T/2/ is fine just change the code to this:

just add opacity

.submenu {
    margin-top: -96px;
    transition: all 0.5s;
    opacity: 0; // fade out the element
}

.dd:hover .submenu {
    margin-top: 12px;
    opacity: 1; // fade in the element
}