下拉菜单模拟效果图：

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. Python高级核心技术97讲 系列教程

    Python高级核心技术97讲 系列教程 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的 ...

  2. Codeforces 404B

    毫无疑问这题不是难题,但是这种题目最让人纠结 打心里对这种题目就比较害怕,果然,各种WE 这里贴上代码,用Python写的,比较偷懒: def cur_pos(a, d): if 0 <= d ...

  3. nodeJs学习-16 数据字典示例

    1.banner ID title 标题 varchar(32) sub_title 副标题 varchar(16) src 图片地址 varchar(64) 2.文章 ID author 作者 va ...

  4. Directx11教程(48) depth/stencil buffer的作用

    原文:Directx11教程(48) depth/stencil buffer的作用      在D3D11中,有depth/stencil buffer,它们和framebuffer相对应,如下图所 ...

  5. jQuery之父：坚持每天都要写代码

    关于作者:John Resig, jQuery之父,同时也是Pro Javascript Techniques和Secrets of the JavaScript Ninja的作者.他目前主持 Kha ...

  6. 猜年龄 v1.0

    给定年龄,用户可以猜三次年龄 年龄猜对,让用户选择两次奖励 用户选择两次奖励后可以退出 age = 30 prize_dict = {0: 'durex', 1: 'okamoto', 2: 'Jis ...

  7. hdu3472 混合图判断欧拉通路

    对于欧拉回路,先判断出度入度的差是否为偶数,然后最大流一次. 此题是判断有无欧拉通路,前提要判断图是否连通,然后欧拉通路的条件:要么出入度差没有奇数,或者只有2个点. 所以先统计差为奇数的个数,如果不 ...

  8. Java练习 SDUT-2499_数字

    数字 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 定义f(x) = {比x小,不可以被x整除并且不和x互质的数的个数 ...

  9. 【Leetcode链表】反转链表（206）

    题目 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 进阶: 你可 ...

  10. JS 的私有成员为什么钦定了 #？

    翻译自 tc39/proposal-class-fields 译者按:社区一直以来有一个声音,就是反对使用 # 声明私有成员.但是很多质疑的声音过于浅薄.人云亦云.其实 TC39 早就对此类呼声做过回 ...