<!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. php7 mysql_pconnect() 缺失 解决方法

    php7 兼容 MySQL 相关函数 PHP7 废除了 ”mysql.dll” ,推荐使用 mysqli 或者 pdo_mysql http://PHP.net/manual/zh/mysqlinfo ...

  2. 判断JS对象是否为空的几种方式

    .将json对象转化为json字符串,再判断该字符串是否为"{}" var data = {}; var b = (JSON.stringify(data) == "{} ...

  3. Linux中要重启apache服务与在windows是有很大的区别,下面我们来介绍一下

    在Linux中要重启apache服务与在windows是有很大的区别,下面我们来介绍一下常用的命令,需要的朋友参考下吧(http://www.hnkjlb.com) linux系统为Ubuntu 一. ...

  4. 拦截器和自定义注解@interface

    1 .拦截器(Interceptor): 用于在某个方法被访问之前进行拦截,然后在Handler执行之前或之后加入某些操作,其实就是AOP的一种实现策略. 拦截用户的请求并进行相应的处理,比如:判断用 ...

  5. linux 软件 手动添加至桌面或启动栏

    1.创建软连接(也可以不用创建软连接,直接写绝对路径) sudo ln -s /opt/eclipse/eclipse /usr/bin/eclipse 2.创建desktop文件 sudo gedi ...

  6. Js中的onblur和onfocus事件应用介绍

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用 html页面中,诸如按钮.文本框等可视元素都具有拥有和失 ...

  7. Sharepoint常见概念

    有待补充: 1.环境部署(AD+DNS+SQL+SharePoint前端): SharePoint基本都是这样的结构,可以在多台服务器中,也就是场,当然也可以在一台服务器上.说说这几部分的功能 (1) ...

  8. SpringCloud学习笔记（一）：SpringCloudt相关面试题

    什么是微服务? 看笔记二 微服务之间是如何独立通讯的? 服务与服务间采⽤轻量级的通信机制互相协作(通常是基于HTTP协议的RESTful API) SpringCloud和Dubbo有什么区别? Du ...

  9. Java—重写与重载的区别

    1.重写(Override) 子类继承了父类原有的方法,但有时子类并不想原封不动的继承父类中的某个方法,所以在方法名,参数列表,返回类型(除了子类中方法的返回值是父类中方法返回值的子类时)都相同的情况 ...

  10. rsync命令集合

    rsync -avz rsync://logs@211.151.78.206/www_logs/2014/03/27/* /mnt/hgfs/iautoslogs/