html - 仅 CSS 下拉菜单 - CSS3 过渡

Question

我正在创建一个下拉菜单。非常简单，在桌面上运行良好。我也需要使用相同的标记来响应。想象一下，当用户单击菜单图标时出现菜单，然后所有列表项都简单地堆叠在彼此下面。

当用户将鼠标悬停在“菜单项 1”上时，会出现“子菜单”。目前我只是让它在悬停时出现和消失。它看起来不太好。我想知道是否有一种简单的方法可以使用 CSS3 过渡来很好地制作这个下拉菜单。

谢谢

---

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

如果您想平滑过渡，则需要使用一种不使用 display: none 的隐藏方式。浏览器无法从 none 过渡到 block，因此这是一个即时切换。

隐藏 .sub-menu 的一种方法是在悬停状态下使用 visibility: hidden; 然后 visibility: visible;，然而，这使得过渡变得更加困难。如果您只是transition: all 0.5 ease，那么菜单会平滑地淡入，但一旦失去 :hover 就会迅速消失。

有一个 full article这贯穿于此，但要点是为可见性添加一个 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 */
}

演示: http://codepen.io/shshaw/pen/gsFch