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

概述我正在创建一个下拉菜单.非常简单适用于桌面.我需要使用相同的标记来响应.想象一下,当用户点击菜单图标时会出现菜单,然后只是所有列表项都堆叠在一起. 当用户将鼠标悬停在“菜单项1”上时,则出现“子菜单”.目前我只是让它出现并在悬停时消失.它看起来不太好看.我想知道是否有一种简单的方法来使用CSS3过渡来使这种下拉很好. 谢谢 CSS .sub-menu{ display:none;}li.s 我正在创建一个下拉菜单.非常简单适用于桌面.我需要使用相同的标记来响应.想象一下,当用户点击菜单图标时会出现菜单,然后只是所有列表项都堆叠在一起.

当用户将鼠标悬停在“菜单项1”上时,则出现“子菜单”.目前我只是让它出现并在悬停时消失.它看起来不太好看.我想知道是否有一种简单的方法来使用CSS3过渡来使这种下拉很好.

谢谢

CSS

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

HTML

<nav>   <ul>     <li ><a href="#">Menu Item 1</a>       <ul >         <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>

解决方法 如果要进行平滑过渡,则需要使用隐藏不使用display：none的方法.浏览器无法从无转换为阻塞,因此它是即时切换.

隐藏.sub菜单的一种方法是使用visibility：hIDden;能见度：可见;然而,在悬停状态下,这使得转换变得更加困难.如果您只是转换：全部0.5轻松,那么菜单将平滑淡入但很快就会消失,只要它丢失：悬停.

这样做有一个full article,但要点是为可见性添加转换延迟,然后在悬停状态下消除转换延迟.

.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

总结

以上是内存溢出为你收集整理的html – 仅CSS下拉菜单 – CSS3过渡全部内容，希望文章能够帮你解决html – 仅CSS下拉菜单 – CSS3过渡所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。