CSS only drop down menu - CSS3 transition

Question

Im creating a drop down menu. Pretty simple works well on a desktop. I need to use the same markup for responsive too. Imagine the menu appears when a user clicks a menu-icon, then simply all the list items are stacked underneath each other.

When the user hovers over 'menu item 1' then the 'sub-menu- appears. At the moment I simply have it to appear and disappear on hover. It doesn't look very nice. I was wondering if there was a simple way to use a CSS3 transition to make this drop down nicely.

Thanks

---

CSS

.sub-menu{
 display:none;
}

li.sub-menu-parent:hover .sub-menu {
 display: block;
}

HTML

 <nav>
   <ul>
     <li class="sub-menu-parent"><a href="#">Menu Item 1</a>
       <ul class="sub-menu">
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
       </ul>
     </li></ul>
     <li><a href="#">Menu Item 2</a></li>
     <li><a href="#">Menu Item 3</a></li>
     <li><a href="#">Menu Item 4</a></li>
     <li><a href="#">Menu Item 5</a></li>
   </ul>
 </nav>

Answer 1

You will need to use a way of hiding it that doesn't use display: none if you want to do a smooth transition. Browsers cannot transition from none to block, so it's an instant toggle.

One way to hide the .sub-menu is to use visibility: hidden; then visibility: visible; on the hover state, however this makes the transitioning a little more difficult. If you just transition: all 0.5 ease, then the menu will fade in smoothly but quickly disappear whenever it loses the :hover.

There's a full article that runs through doing this, but the gist is adding a transition-delay to visibility, then removing that transition-delay on the hover state.

.sub-menu-parent { position: relative; }

.sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: -10%;
  transition: all 0.5s ease 0s, visibility 0s linear 0.5s; /* the last value is the transition-delay for visibility */
}

.sub-menu-parent:hover .sub-menu {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  left: 0;
  transition-delay: 0s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}

DEMO: http://codepen.io/shshaw/pen/gsFch