<!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. uoj279 题目交流通道

    题目:告诉你每两个点之间的最短路距离.构造每条边边权<=m的无向完全图.求有多少种不同边权的图满足最短路限制?n<=400. 标程: #include<cstdio> #inc ...

  2. 【转载】linux进程及进程控制

    Linux进程控制   程序是一组可执行的静态指令集,而进程(process)是一个执行中的程序实例.利用分时技术,在Linux操作系统上同时可以运行多个进程.分时技术的基本原理是把CPU的运行时间划 ...

  3. Serverless Kubernetes全面升级2.0架构：支持多命名空间、RBAC、CRD、PV/PVC等功能

    Serverless Kubernetes概述: 阿里云Serverless Kubernetes容器服务最新开放香港.新加坡.悉尼区域,同时全面开放2.0架构,帮助用户更加便捷.轻松地步入“以应用为 ...

  4. 服务器迁移部署OmsEdi

    基本配置 绑定 高级设置

  5. php面向对象成员方法(函数)练习

    <?php header('content-type:text/html;charset=utf-8'); //成员方法的举例 /* ①添加sayHello 成员方法,输出 'hello' ②添 ...

  6. redux在react项目中的应用

    今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...

  7. 分布式配置中心(Spring Cloud Config)

    真有意思的一个问题,我先把我遇到的写一次 ,今天学习Spring Cloud Config  新建了三个module ,eureka-server,config-server,config-clien ...

  8. 设置listContrl中指定行的颜色

    在MFC中 自己通过手动拖放CListCtrl控件来制作自己的表格: 目的: 将指定item的行更该颜色: 步骤: 1,在窗口中拖放CListCtrl控件, 单击右键 创建控件对象: CListCtr ...

  9. BaseController 的使用

    为了提现代码的高可用性,我们可以常见的把dao层进行抽取,service ,但是很少看见有controller的抽取,其实dao层也是可以被抽取的. 首先我们定义一个BaseController接口 ...

  10. str_replace函数的使用规则和案例详解

    str_replace函数的使用规则和案例详解 str_replace函数的简单调用: <?php $str = '苹果很好吃.'; //请将变量$str中的苹果替换成香蕉 $strg = st ...