<!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. SpringBoot_Mybatis MyBatisPlus

    一.SpringBoot中使用Mybatis springBoot中使用mybatis跟以前spring中使用方法一样. 1.mybatis配置: spring: datasource: url: j ...

  2. thinkphp 自动验证

    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 大理石平台价格表 验证规则 数据验证可以进行数据类型.业务规则.安全判断等方面的验证 ...

  3. js算法之寻路

    A*寻路算法 算法流程说明: 说明:起始节点记作S,目标节点记作E,对于任意节点P,从S到当前节点P的总移动消耗记作GP,节点P到目标E的曼哈顿距离记作HP,从节点P到相邻节点N的移动消耗记作DPN, ...

  4. 19-11-13-Night-∠

    连夜补博客 ZJ: 看见T1就自闭了.(高考数学)(但是好像不是) 三个暴力就结束了. 35 Miemeng 20 00:00:41 10 00:00:41 10 00:00:41 40 00:00: ...

  5. 19-10-29-Z

    %%%ZZYY 只是因为是Z才模一下的. ZJ一下: 考试T1写了三张纸但是它死了. T2T3暴力叕写跪了. 考试一定一定不能不严密,少推两个交点是要命的啊. 就因为叕叕少开龙龙见祖宗了. 如果考试能 ...

  6. Python学习day43-数据库(多表关系)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  7. Sql Server 2005主机和镜像切换SQL语句

    --1.主备互换 --主机执行: USE master; ALTER DATABASE <DatabaseName> SET PARTNER FAILOVER; --2.主服务器Down掉 ...

  8. flink第一个应用

    去年华为大佬就开始在用flink,今天刚有空就稍微跟着写了个demo玩起来(就不用java了 spark和flink还是用scala玩) package flink.testimport org.ap ...

  9. fwt优化+树形DP HDU 5909

    //fwt优化+树形DP HDU 5909 //见官方题解 // BestCoder Round #88 http://bestcoder.hdu.edu.cn/ #include <bits/ ...

  10. Django项目：CRM(客户关系管理系统)--66--56PerfectCRM实现CRM客户报名缴费链接

    # kingadmin.py # ————————04PerfectCRM实现King_admin注册功能———————— from crm import models #print("ki ...