Adding transition to a dropdown

Question

I'm not sure if this can be done that way it was built but I'd like to add a transition effect to my dropdown. Anything that would make it seem less choppy. SLide, fade etc. Codepen below.

<div id="nav-wrap">

<ul>
    <li id="link-one" class="orange">
    <a href="#" class="parent-one-link"><span>Test</span></a>

     <div class="subnav">
          <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
          </ul>
        </div><!-- /.subnav -->

    </li>

    <li class="red"><a href="#"><span>Test</span></a></li>

    <li class="pink"><a href="#"><span>Test</span></a></li>

    <li class="purple"><a href="#"><span>Test</span></a></li>

    <li class="blue"><a href="#"><span>Test</span></a></li>

    <li class="green"><a href="#"><span>Test</span></a></li>

    <li class="yellow-facebook"><a href="#"><span></span></a></li>

</ul>

</div> <!-- nav-wrap -->

#nav-wrap .doubleLine {
  display: table-cell;
  line-height: 1.2em;
    width:65.275%;
}   

#nav-wrap {
    width:100%;
    height:100px;
    font-weight:500;
    padding: 0;
    left:0;
    font-family: 'Raleway', Arial, sans-serif;
    z-index:100;
    float:left;
}

#nav-wrap ul {
    list-style-type: none;
    margin: 0;
    padding:0;
    text-transform: uppercase;
}

#nav-wrap ul li {
    width:14.275%; /*  ~(100/7)  */
    display:block;
    float:left;
    text-align:center;
    -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}   

#nav-wrap ul li + li {
  border-left: 1px #fff solid !important;
}

#nav-wrap ul li a {
    width:100%;
    display: block;
    height: 100%;
    position: relative;
    color:#FFFFFF !important;
    text-decoration:none;
}

#nav-wrap ul li span {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    font-size:1.45em;
    text-align: center;
    padding: 0 5% 0 5%; /* was 0 20px */ 
    line-height: 100px;
}

#nav-wrap ul li.yellow-facebook {
    width:14.275%;
}   

#nav-wrap ul li.yellow-facebook a {
    background-size:130px 26px; /* > 25px */
}

li .subnav {
  display: none;
  /*position: absolute;  */
  clear: both;
  margin-left: 0;
  font-size:0.9em;
}

.subnav ul {
  margin-left: 0;
  float:left;
  padding:0;
  width:100%;
}

.subnav ul li { 
    margin: 0 0 0 0;
    width:100% !important;
    height:23px;
    float:none !important;
}

.subnav ul li a {
    padding: 10px 0 3px 0;
    /*background-image: url(../images/submenu-background-divider.png);
    background-repeat:no-repeat;
    background-position:left;*/
}

#nav-wrap .subnav ul li + li {
  border-left: none !important;
}   

.subnav {
    width:100%;
    padding: 0;
    margin: 0.05% 0 0 0;
    border-top:#FFF 1px solid;
}

.subnav ul li a:link, a:active, a:visited {
  text-decoration:none;
}

.subnav ul li a:hover { 
  color:#000;
  text-decoration:none;
}

li:hover > .subnav {display:inline-block; left:0;}

#nav-wrap ul li.orange a {
    background-color:#f37028;
}
#nav-wrap ul li.orange a:hover {
    color: #231f20 !important;
}
#nav-wrap ul li.red a {
    background-color:#ed1b24;
}
#nav-wrap ul li.red a:hover {
    color: #231f20 !important;
}
#nav-wrap ul li.pink a {
    background-color:#e54198;
}
#nav-wrap ul li.pink a:hover {
    color: #231f20 !important;
}
#nav-wrap ul li.purple a {
    background-color:#6b439c;
}
#nav-wrap ul li.purple a:hover {
    color: #231f20 !important;
}
#nav-wrap ul li.blue a {
    background-color:#0193cf;
}
#nav-wrap ul li.blue a:hover {
    color: #231f20 !important;
}
#nav-wrap ul li.green a {
    background-color:#80c02c;
}
#nav-wrap ul li.green a:hover {
    color: #231f20 !important;
}
#nav-wrap ul li.yellow-facebook a {
    background-color:#fff300;
    background-image:url(../images/social-media/facebook-text.png);
    background-repeat:no-repeat;
    background-position:center;
}
#nav-wrap ul li.yellow-facebook a:hover {
    color: #231f20;
    background-image:url(../images/social-media/facebook-text_over.png);
}

http://codepen.io/Compton/pen/jLGyo/

Answer 1

You can try a CSS3 transition, only you would have to use opacity instead of display none.

add this

li:hover > .subnav {
  display:inline-block;
  left:0;
  -webkit-transition: all 0.4s ease-in;
 -moz-transition: all 0.4s ease-in;
 -o-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity:1.0;
}

and change the display none to this:

li .subnav {
  opacity:0;
  /*position: absolute;  */
  clear: both;
  margin-left: 0;
  font-size:0.9em;
}

Jquery can do some sliding if you'd rather, but this is a little simpler to set up, you can also adjust the height to make it slide down if youd rather that instead of a fade in.

Answer 2

Put this to the animated element CSS:

transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

It basically fools browser that the transition or animation is 3D and enables GPU acceleration and disables two-sided planes in webkit based browsers.