下拉菜单模拟效果图：

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. Redhad的开源Paas平台：OpenShift

    参考redHat的官方文章翻译而来:https://openshift.redhat.com/community/wiki/architecture-overview OpenShift Origin ...

  2. Katalon系列十九：元素相同或无法定位时的定位技巧

    经常看到有人问元素属性都相同,怎么定位,这里总结一下.下面以Xpath为例讲解,CSS其实也是一样的,只是语法不一样罢了.网上说CSS会比Xpath快一些,但在Katalon主用Xpath,感觉也还行 ...

  3. 项目ITP(七) javaWeb 整合 Quartz 实现动态调度 而且 持久化

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010378410/article/details/36255511 项目ITP(七) javaWe ...

  4. 计算机组成原理作业一 熟悉MIPS指令

    第一题 .data outputd: .asciiz "Alpha","November","First","alpha" ...

  5. scala实现定时任务的方法

    /** * ScheduledExecutorService是从Java SE5的java.util.concurrent里,做为并发工具类被引进的,这是最理想的定时任务实现方式. * 它有以下好处: ...

  6. 【Leetcode 堆、快速选择、Top-K问题 BFPRT】数组中的第K个最大元素（215）

    这道题很强大,引出了很多知识点 题目 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5 ...

  7. 转载 初探Promise

    初探Promise https://segmentfault.com/a/1190000007032448 javascript es6 promise 33.5k 次阅读  ·  读完需要 65 分 ...

  8. 大数据技术之Oozie

      第1章 Oozie简介 Oozie英文翻译为:驯象人.一个基于工作流引擎的开源框架,由Cloudera公司贡献给Apache,提供对Hadoop MapReduce.Pig Jobs的任务调度与协 ...

  9. Ajax之基础

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/liu_yujie2011com/article/details/29812777         几 ...

  10. 【JZOJ2224】【NOI2006】最大获利

    题目描述 新的技术正冲击着手机通讯市场,对于各大运营商来说,这既是机遇,更是挑战.THU集团旗下的CS&T通讯公司在新一代通讯技术血战的前夜,需要做太多的准备工作,仅就站址选择一项,就需要完成 ...