<!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. 图论最短路径算法——Dijkstra

    说实在的,这算法很简单,很简单,很简单--因为它是贪心的,而且码量也小,常数比起SPFA也小. 主要思想 先初始化,dis[起点]=0,其它皆为无限大. 还要有一个bz数组,bz[i]表示i是否确定为 ...

  2. 前端面试题之一JAVASCRIPT（算法类）

    一.JS操作获取和设置cookie //创建cookie function setcookie(name, value, expires, path, domain, secure) { var co ...

  3. 微信小程序连续旋转动画this.animation.rotate

    一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一 ...

  4. Chrome浏览器console控制台不打印任何js错误信息

    手欠在Chrome控制台在错误信息,右键:Hide messages from vue 看不到 报错信息 这里删除成 默认的Filter 报错就出现了

  5. elasticsearch配置优化

    调整ES内存分配有多种方式,建议调整 elasticsearch 中的设置(还可以直接修改bin下的启动脚本). # Directory where the Elasticsearch binary ...

  6. 在scrapy中将数据保存到mongodb中

    利用item pipeline可以实现将数据存入数据库的操作,可以创建一个关于数据库的item pipeline 需要在类属性中定义两个常量 DB_URL:数据库的URL地址 DB_NAME:数据库的 ...

  7. 论文翻译——R-CNN（目标检测开山之作）

    R-CNN论文翻译 <Rich feature hierarchies for accurate object detection and semantic segmentation> 用 ...

  8. GitHub的使用问题记录

    1. github如何收藏和关注? github 中的star作用:star 的作用是收藏,目的是方便以后查找. watch 的作用是关注,目的是等作者更新的时候,你可以收到通知.fork 的作用是参 ...

  9. leetcode 49 Group Anagram

    lc49 Group Anagram 逻辑很简单,就是统计字母出现次数,然后将完全相同的字符串放入同一list 关键是怎么实现 统计的部分,可以通过将string排序,Arrays.sort(),或者 ...

  10. 在 Angularjs 中$state.go 如何传递参数

    在目标页面规定接受的参数: .state('app.AttendanceEditFixed', { url: '/AttendanceEditFixed', params: {'id': null,' ...