下拉菜单模拟效果图：

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. set的基本使用

    构造一个集合 现在我们来构造一个集合. C++ 中直接构造一个 set的语句为: sets.这样我们定义了一个名为 s的.储存 T类型数据的 集合,其中 T是集合要储存的数据类型.初始的时候 s是空集 ...

  2. Django多业务模块的写法

    from django.shortcuts import render # Create your views here. from django.shortcuts import HttpRespo ...

  3. 贝叶斯--旧金山犯罪分类预测和电影评价好坏 demo

    来源引用:https://blog.csdn.net/han_xiaoyang/article/details/50629608 1.引言 贝叶斯是经典的机器学习算法,朴素贝叶斯经常运用于机器学习的案 ...

  4. excel一些常用的函数

    函数分类: 关联匹配类 清洗处理类 逻辑运算类 计算统计类 时间序列类 一.关联匹配类 经常性的,需要的数据不在同一个excel表或同一个excel表不同sheet中,数据太多,copy麻烦也不准确, ...

  5. jQuery的deferred对象使用详解【转载】

    一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...

  6. R语言分类算法之随机森林

    R语言分类算法之随机森林 1.原理分析: 随机森林是通过自助法(boot-strap)重采样技术,从原始训练样本集N中有放回地重复随机抽取k个样本生成新的训练集样本集合,然后根据自助样本集生成k个决策 ...

  7. php thrift TServerSocket实现端口复用

    <?php namespace Message\Controller; use Think\Controller; use Thrift\Exception\TException; use Th ...

  8. Codeforces Round #429 (Div. 2) A. Generous Kefa【hash/判断字符串是否有一种字符个数大于m】

    A. Generous Kefa time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  9. Leetcode883.Projection Area of 3D Shapes三维形体投影面积

    在 N * N 的网格中,我们放置了一些与 x,y,z 三轴对齐的 1 * 1 * 1 立方体. 每个值 v = grid[i][j] 表示 v 个正方体叠放在单元格 (i, j) 上. 现在,我们查 ...

  10. Liferay Model Hints

    这篇文章主要介绍如何通过model hint 来修改liferay builder service生成数据库表中默认字段的长度. 1.什么是Model Hints? 它是对liferay builde ...