本篇文章主要介绍了纯CSS实现下拉菜单的示例代码,分享给大家,具体如下:
将下拉菜单的ul高度设置为0,并且超出部分隐藏掉。
设置下拉菜单的高度添加过渡效果,高度为auto时过渡效果失效。
<style> ul{ list-style: none; margin: 0; padding: 0; } ul li a{ display: block; text-decoration: none; width: 100px; height: 50px; text-align: center; line-height: 50px; color: white; background-color: #2f3e45; } .drop-down{ width: 100px; height: 50px; } .drop-down-content{ opacity: 0; height: 0; overflow: hidden; transition: all 1s ease; } p{ font-size: 20px; margin: 0; } .drop-down-content li:hover a{ background-color: red; } .nav .drop-down:hover .drop-down-content{ opacity: 1; height: 150px; } </style> <ul class="nav"> <li class="drop-down"> <a href="#">下拉菜单</a> <ul class="drop-down-content"> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> </ul> </li> </ul> <p>内容</p>
效果图如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
本篇文章主要介绍了css 透明边框background-clip妙用,分享给大家,也给自己留个...
translate(-50%,-50%) 属性: 向上和左,移动自身长宽的 50%,使其居于中心位置...
使用定位方法 style*{ padding: 0; margin: 0;}#myDiv { width: 100%; height: 1...
一、本文实现的效果图如下:布局右侧使用flex布局,超过3个则换行。 父元素代码...
首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例; 可以发现除1...
纯css3制作煽动翅膀的蝴蝶,先看效果 怎么样,效果还不错吧 上代码: html div i...
大量链接 你肯定见过很多这样的网站:底部有50,100,甚至更多的链接。搜索引擎...
HTML标签 开始标签(opening tag):开放标签 结束标签(closing tag):闭合标签 元素...
未隐藏之前: 隐藏之后: CSS: 复制代码 代码如下: overflow:hidden;text-overfl...
2016年1月7日消息,据 TOP云 域名交易 平台的记录显示(http://www.zuntop.com/?...