下拉菜单模拟效果图：

CSS3：

        <style>

            #box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;}

            #box:hover{height:250px;}

            #box ul{list-style:none; margin:; padding:;}

            #box ul li{width:198px; height:48px; line-height: 50px; text-align: center; border:1px red solid; background:#000000; color:white;}

        </style>

HTML：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="box">

            <ul>

                <li>This's 1</li>

                <li>This's 2</li>

                <li>This's 3</li>

                <li>This's 4</li>

                <li>This's 5</li>

            </ul>

        </div>

    </body>

</html>

【CSS3动画】下拉菜单模拟的更多相关文章

  1. HTML5/CSS3动画下拉菜单

    在线演示 本地下载

  2. 纯css3圆角下拉菜单 都没敢用js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  4. CSS3制作下拉菜单

    导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...

  5. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

  6. 小米网css3导航下拉菜单代码

    效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...

  7. CSS3手风琴下拉菜单

    在线演示 本地下载

  8. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  9. 纯CSS3实现淡入淡出下拉菜单

    纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3教程下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果 源代码:http://w ...

随机推荐

  1. 悠星网络基于阿里云分析型数据库PostgreSQL版的数据实践

    说到“大数据”,当下这个词很火,各行各业涉及到数据的,目前都在提大数据,提数据仓库,数据挖掘或者机器学习,但同时另外一个热门的名词也很火,那就是“云”.越来越多的企业都在搭建属于自己的云平台,也有一些 ...

  2. DOM 创建元素 删除元素（结点）

    创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <script> var para=document. ...

  3. Google搜索技巧－入门篇

    基本搜索 Google 查询简洁方便,仅需输入查询内容并敲一下回车键 (Enter),或单击“Google 搜索”按钮即可得到相关资料. 搜索两个及两个以上关键字 Google 只会返回那些符合您的全 ...

  4. JAVA的一次编译，到处执行，你知道多少？

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wangyongxia921/article/details/28117155   一.对AVA的迷茫 ...

  5. C++之正则表示，字符串是否为全字母或者全数字

    bool isLetter(std::string& inputtext){ tr1::regex reg("^[A-Za-z]+$"); bool bValid = tr ...

  6. java jsp j2ee

    1. JavaScript用于编写嵌入在网页文档中的程序,它由浏览器负责解释和执行,可以在网页上产生动态的显示效果和实现与用户交互的功能,譬如,让一串文字跟着鼠标移动,让一个图标在网页漂浮移动,验证用 ...

  7. request与response的乱码问题的总结及解决方法

    一. response的乱码问题: 1,使用   字节流  向页面输出中文: 不一定会出现乱码,因为中文字节数组默认是GBK,如果浏览器打开的默认编码也是GBK,就不会出现乱码,否则会乱码. 解决办法 ...

  8. POJ3889Fractal Streets

    Fractal Streets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 445   Accepted: 162 Des ...

  9. PHP-xdebug+PHPStorm的debug安装（未完）

    PHP的xdebug安装 一.首先去phpinfo()查看自己的php是32还是64位的,再根据php版本在下面的网站https://xdebug.org/download.php选择xdebug插件 ...

  10. SQLServer —— EXISTS子查询

    一.删除数据库 use master go if exists (select * from sysdatabases where name = 'Demo') drop database Demo ...