Geek Answers Handbook

CSS only dropdown menu - CSS3 transition

Im creating a drop down menu. Pretty simple works well on the desktop. I need to use the same markup for the response. Imagine that the menu appears when the user clicks the menu icon, and then just all the elements of the list are stacked under each other.

When the user hovers over “menu item 1”, “submenu” appears. For now, I just want it to appear and disappear on hover. It doesn’t look very good. I was wondering if there was an easy way to use CSS3 transition to make it beautiful.

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>
+4
source share
2

, display: none, . none block, .

.sub-menu visibility: hidden;, visibility: visible; , . transition: all 0.5 ease, , , : hover.

, , transition-delay , transition-delay .

.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

+6

More articles:


All Articles