<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>炫酷下拉菜单</title>

    <style>

        .ulBox {

            width: 500px;

            margin: 0 auto;

        }

        .ulBox  li {

            float: left;

            list-style: none;

            background-color: green;

            padding: 0 10px;

            line-height: 40px;

            color: #fff;

            position: relative;

        }

        .ulBox li ul {

            height: 0;

            overflow: hidden;

            position: absolute;

            left: 0;

            top: 40px;

            padding: 0;

        }

        .ulBox  li ul li {

            background-color: red;

            list-style: none;

            float: none;

            transition: all .3s;

            -webkit-transition: all .3s;

            opacity: 0;

        }

        .ulBox  li ul li:nth-of-type(1n) {

            transform: translate3d(100%,0,0);

            -webkit-transform: translate3d(100%,0,0);

        }

        .ulBox  li ul li:nth-of-type(2n) {

            transform: translate3d(-100%,0,0);

            -webkit-transform: translate3d(-100%,0,0);

        }

        .ulBox li:hover ul {

            overflow: visible;

        }

        .ulBox li:hover ul li {

            opacity: 1;

            transform: translate3d(0,0,0);

            -webkit-transform: translate3d(0,0,0);

        }

    </style>

</head>

<body>

    <nav>

        <ul class="ulBox">

            <li>HTMl5

                <ul class="ulBox1">

                    <li>HTMl1</li>

                    <li>HTMl2</li>

                    <li>HTMl3</li>

                    <li>HTMl4</li>

                </ul>

            </li>

            <li>CSS3

                <ul class="ulBox1">

                    <li>CSS1</li>

                    <li>CSS2</li>

                    <li>CSS3</li>

                    <li>CSS4</li>

                </ul>

            </li>

            <li>Javascript

                <ul class="ulBox1">

                    <li>Javascript1</li>

                    <li>Javascript2</li>

                    <li>Javascript3</li>

                    <li>Javascript4</li>

                </ul>

            </li>

            <li>Jquery

                <ul class="ulBox1">

                    <li>Jquery1</li>

                    <li>Jquery2</li>

                    <li>Jquery3</li>

                    <li>Jquery4</li>

                </ul>

            </li>

            <li>Vue

                <ul class="ulBox1">

                    <li>Vue1</li>

                    <li>Vue2</li>

                    <li>Vue3</li>

                    <li>Vue4</li>

                </ul>

            </li>

        </ul>

    </nav>

</body>

</html>

css3 炫酷下拉菜单的更多相关文章

  1. 基于CSS3金属风格下拉菜单

    基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/

  2. CSS3 3D旋转下拉菜单--兼容性不太好

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. jQuery/CSS3大屏下拉菜单 自定义子菜单内容

    这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单.图片等HTML元素,是 ...

  4. CSS3小清新下拉菜单 简易大方

    之前有分享过几款CSS3菜单和jQuery菜单,像这款HTML5/CSS3自定义下拉框 3D卡片折叠动画3D效果非常华丽,这次要分享的这款相对比较简单,很适合用在用户的操作面板上.先来看看效果图: 怎 ...

  5. 用bootstrap和css3制作按钮式下拉菜单

    利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...

  6. 【CSS3动画】下拉菜单模拟

    下拉菜单模拟效果图: CSS3: <style> #box{width:200px; height:50px; overflow:hidden; cursor: pointer; tran ...

  7. android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码

    Android精选源码 仿微信打开红包旋转动画 使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...

  8. Swift 自定义炫酷下拉刷新效果

    先来看下效果 下拉刷新 其实下拉刷新没大家想得那么难.本文已第二个为例子.给大家讲解下下拉刷新的做法(完整代码后面会放上) 首先,先搞一个single View Application .然后进Mai ...

  9. 纯css3代码写下拉菜单效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 深入理解Java虚拟机（类加载机制）

    文章首发于微信公众号:BaronTalk 上一篇文章我们介绍了「类文件结构」,这一篇我们来看看虚拟机是如何加载类的. 我们的源代码经过编译器编译成字节码之后,最终都需要加载到虚拟机之后才能运行.虚拟机 ...

  2. 跳表上线性dp——1150D 好题！

    题目设计的很好,感觉做了这题对dp的状态有了更深的理解 /* 先预处理序列自动机 dp[i][j][k]表示匹配到i,j,k时的最靠前的位置 那么现在A串加入了一个字母,我们要求的就是dp[i+1][ ...

  3. Python3.6爬虫+Djiago2.0+Mysql --运行djiago环境

    1.安装djiago 模块 pip install Django  --默认安装最新的  安装完成以后可以python -m pip list 查看模块是否安装 2.创建项目及app 及生成目录 备注 ...

  4. springboot与热部署

    在开发中我们修改一个Java文件后想看到效果不得不重启应用,这导致大量时间花费,我们希望不重启应用的情况下,程序可以自动部署(热部署).有以下四种情况,如何能实现热部署. 1.模板引擎: 在Sprin ...

  5. 【breathandlife】气势磅礴、比较好听的旋律有哪些？

    [breathandlife]气势磅礴.比较好听的旋律有哪些? 分享:yunbest作者:来源:2015-10-26 专题:breathandlife [breathandlife]气势磅礴.比较好听 ...

  6. Java笔记 - 输入输出流

    java.io包中定义了各式各样的"流(stream)" 类型(类或抽象类),通过标准的方法实现对于数据的输入/输出操作. 一.流类型分类 以从不同的角度对其进行分类:按数据流的方 ...

  7. 2.Spring【DI】XML方式

    依赖: 在A类中引用了B类,说明A依赖于B. 注入: 使用Spring框架给A类中的B对象的属性赋值. 直接上代码: 1.只使用IOC public class Person { private St ...

  8. 全栈之路-微信小程序-SKU开发（分析）

    SKU是整个小程序中最难完成的部分了,好好记录一下SKU,主要是想记录一下 从最开始拿到这个业务到最终完成这个功能期间的思考过程,至于代码什么的,记录也好,不记录也行,再看! 一.从思路说起 1.SK ...

  9. MaxCompute，基于Serverless的高可用大数据服务

    摘要:2019年1月18日,由阿里巴巴MaxCompute开发者社区和阿里云栖社区联合主办的“阿里云栖开发者沙龙大数据技术专场”走近北京联合大学,本次技术沙龙上,阿里巴巴高级技术专家吴永明为大家分享了 ...

  10. 大牛就别进来了.npm --save-dev --save 的区别

    --save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西. 比如,你写 ES6 代码,如果你想编译成 ES5 发布那么 babel 就是devDependencies.如果 ...