下拉菜单旋转出现css

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        @charset "utf-8";

        body{

            margin: 0;

            padding: 0;

            -webkit-text-size-adjust: none;

            /*background-image: url("../img/hat.jpg");*/

            font: 12px "宋体";

        }

        a img {

            border: 0

        }

        ul, ol, li {

            list-style-type: none;

            vertical-align: 0

        }

        a {

            outline-style: none;

            color: #535353;

            text-decoration: none

        }

        a:hover {

            color: #D40000;

            text-decoration: none

        }

        .clear {

            height: 0;

            overflow: hidden;

            clear: both

        }

        header{

            height: 100px;

        }

        input{

            border: none;

        }

        .button {

            display: inline-block;

            zoom: 1;

            *display: inline;

            vertical-align: baseline;

            margin: 0 2px;

            outline: none;

            cursor: pointer;

            text-align: center;

            text-decoration: none;

            font: 14px/100% Arial, Helvetica, sans-serif;

            padding: 0.25em 0.6em 0.3em;

            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);

            -webkit-border-radius: .5em;

            -moz-border-radius: .5em;

            border-radius: .5em;

            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

        }

        /*restCSS结束，应用特效时，以上样式可删除*/

        /* 需要的css样式 */

        .nav {

            width: 970px;

            margin: 0 auto;

            text-align: center;

        }

        .menu, .menu ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        .menu {

            height: 58px;

            margin-top: 20px;

        }

        .menu li {

            background-color: #0C0000;

            border-bottom: 2px solid #181818;

            border-top: 2px solid #303030;

            min-width: 160px;

        }

        .menu > li {

            display: block;

            float: left;

            position: relative;

        }

        .menu > li:first-child {

            border-radius: 5px 0 0;

        }

        .menu a {

            border-left: 3px solid rgba(0, 0, 0, 0);

            /*background: url("../img/back.jpg");*/

            color: #808080;

            display: block;

            font-size: 18px;

            line-height: 54px;

            padding: 0 25px;

            text-decoration: none;

            text-transform: uppercase;

        }

        .menu li:hover {

            background-color: #1c1c1c;

            background: -moz-linear-gradient(#1c1c1c, #1b1b1b);

            background: -ms-linear-gradient(#1c1c1c, #1b1b1b);

            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));

            background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);

            background: -o-linear-gradient(#1c1c1c, #1b1b1b);

            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');

            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";

            background: linear-gradient(#1c1c1c, #1b1b1b);

            border-bottom: 2px solid #222222;

            border-top: 2px solid #1B1B1B;

            /*改变加深父元素的背景*/

        }

        .menu li:hover > a {

            border-radius: 5px 0 0 0;

            border-left: 3px solid #C4302B;

            color: #C4302B;

        }

        .submenu {

            left: 0;

            max-height: 0;

            position: absolute;

            top: 100%;

            z-index: 0;

            -webkit-perspective: 400px;

            -moz-perspective: 400px;

            -ms-perspective: 400px;

            -o-perspective: 400px;

            perspective: 400px;

        }

        .submenu li {

            opacity: 0;

            -webkit-transform: rotateY(90deg);

            -moz-transform: rotateY(90deg);

            -ms-transform: rotateY(90deg);

            -o-transform: rotateY(90deg);

            transform: rotateY(90deg);

            -webkit-transition: opacity .4s, -webkit-transform .5s;

            -moz-transition: opacity .4s, -moz-transform .5s;

            -ms-transition: opacity .4s, -ms-transform .5s;

            -o-transition: opacity .4s, -o-transform .5s;

            transition: opacity .4s, transform .5s;

            /*实现下拉菜单螺旋淡出*/

        }

        .menu .submenu li:hover a {

            border-left: 3px solid #454545;

            border-radius: 0;

            color: #ffffff;

        }

        .menu > li:hover .submenu, .menu > li:focus .submenu {

            max-height: 2000px;

            z-index: 10;

        }

        .menu > li:hover .submenu li, .menu > li:focus .submenu li {

            opacity: 1;

            -webkit-transform: none;

            -moz-transform: none;

            -ms-transform: none;

            -o-transform: none;

            transform: none;

        }

        /*动画递进的时间 实现一个个螺旋子菜单*/

        .menu li:hover .submenu li:nth-child(1) {

            -webkit-transition-delay: 0s;

            -moz-transition-delay: 0s;

            -ms-transition-delay: 0s;

            -o-transition-delay: 0s;

            transition-delay: 0s;

        }

        .menu li:hover .submenu li:nth-child(2) {

            -webkit-transition-delay: 50ms;

            -moz-transition-delay: 50ms;

            -ms-transition-delay: 50ms;

            -o-transition-delay: 50ms;

            transition-delay: 50ms;

        }

        .menu li:hover .submenu li:nth-child(3) {

            -webkit-transition-delay: 100ms;

            -moz-transition-delay: 100ms;

            -ms-transition-delay: 100ms;

            -o-transition-delay: 100ms;

            transition-delay: 100ms;

        }

        .menu li:hover .submenu li:nth-child(4) {

            -webkit-transition-delay: 150ms;

            -moz-transition-delay: 150ms;

            -ms-transition-delay: 150ms;

            -o-transition-delay: 150ms;

            transition-delay: 150ms;

        }

        .menu li:hover .submenu li:nth-child(5) {

            -webkit-transition-delay: 200ms;

            -moz-transition-delay: 200ms;

            -ms-transition-delay: 200ms;

            -o-transition-delay: 200ms;

            transition-delay: 200ms;

        }

        .menu li:hover .submenu li:nth-child(6) {

            -webkit-transition-delay: 250ms;

            -moz-transition-delay: 250ms;

            -ms-transition-delay: 250ms;

            -o-transition-delay: 250ms;

            transition-delay: 250ms;

        }

        .menu li:hover .submenu li:nth-child(7) {

            -webkit-transition-delay: 300ms;

            -moz-transition-delay: 300ms;

            -ms-transition-delay: 300ms;

            -o-transition-delay: 300ms;

            transition-delay: 300ms;

        }

        .menu li:hover .submenu li:nth-child(8) {

            -webkit-transition-delay: 350ms;

            -moz-transition-delay: 350ms;

            -ms-transition-delay: 350ms;

            -o-transition-delay: 350ms;

            transition-delay: 350ms;

        }

        .submenu li:nth-child(1) {

            -webkit-transition-delay: 350ms;

            -moz-transition-delay: 350ms;

            -ms-transition-delay: 350ms;

            -o-transition-delay: 350ms;

            transition-delay: 350ms;

        }

        .submenu li:nth-child(2) {

            -webkit-transition-delay: 300ms;

            -moz-transition-delay: 300ms;

            -ms-transition-delay: 300ms;

            -o-transition-delay: 300ms;

            transition-delay: 300ms;

        }

        .submenu li:nth-child(3) {

            -webkit-transition-delay: 250ms;

            -moz-transition-delay: 250ms;

            -ms-transition-delay: 250ms;

            -o-transition-delay: 250ms;

            transition-delay: 250ms;

        }

        .submenu li:nth-child(4) {

            -webkit-transition-delay: 200ms;

            -moz-transition-delay: 200ms;

            -ms-transition-delay: 200ms;

            -o-transition-delay: 200ms;

            transition-delay: 200ms;

        }

        .submenu li:nth-child(5) {

            -webkit-transition-delay: 150ms;

            -moz-transition-delay: 150ms;

            -ms-transition-delay: 150ms;

            -o-transition-delay: 150ms;

            transition-delay: 150ms;

        }

        .submenu li:nth-child(6) {

            -webkit-transition-delay: 100ms;

            -moz-transition-delay: 100ms;

            -ms-transition-delay: 100ms;

            -o-transition-delay: 100ms;

            transition-delay: 100ms;

        }

        .submenu li:nth-child(7) {

            -webkit-transition-delay: 50ms;

            -moz-transition-delay: 50ms;

            -ms-transition-delay: 50ms;

            -o-transition-delay: 50ms;

            transition-delay: 50ms;

        }

        .submenu li:nth-child(8) {

            -webkit-transition-delay: 0s;

            -moz-transition-delay: 0s;

            -ms-transition-delay: 0s;

            -o-transition-delay: 0s;

            transition-delay: 0s;

        }

    </style>

</head>

<body>

<div class="nav">

    <ul class="menu">

        <li><a href="javascript:;">HOME</a>

            <ul class="submenu">

                <li><a href="javascript:;">options</a></li>

                <li><a href="javascript:;">options</a></li>

                <li><a href="javascript:;">options</a></li>

                <li><a href="javascript:;">options</a></li>

                <li><a href="javascript:;">options</a></li>

            </ul>

        </li>

        <li><a href="javascript:;">ABOUT</a>

            <ul class="submenu">

                <li><a href="javascript:;">options</a></li>

                <li><a href="javascript:;">options</a></li>

                <li><a href="javascript:;">options</a></li>

            </ul>

        </li>

        <li><a href="javascript:;">TEAM</a></li>

        <li><a href="javascript:;">NEWS</a></li>

        <li><a href="javascript:;">JALLERY</a></li>

        <li><a href="javascript:;">CONTENT</a></li>

    </ul>

</div>

</body>

</html>

下拉菜单旋转出现css的更多相关文章

形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）
HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
下拉菜单制作——利用CSS实现的一个实例
本文实现了一个经典的下拉菜单的制作. 首先,写出Html部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
jQuery插件：模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
一个常见下拉菜单的样式：一体化小三角（纯css手写解决）
类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...
CSS3 3D旋转下拉菜单--兼容性不太好
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
超简洁的CSS下拉菜单
效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
CSS 实现样式下拉菜单
下拉菜单的实现脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...

随机推荐

Python学习笔记7 头文件的添加规则（转载）
转载自:https://www.cnblogs.com/taurusfy/p/7605787.html ************************************************ ...
IE6兼容性bug汇总
1.终极方法:条件注释  <!--[if gte IE 6]&g ...
积性函数与Dirichlet卷积
转载自https://oi-wiki.org/math/mobius/ 积性函数定义若 $gcd(x,y)=1$ 且 $f(xy)=f(x)f(y)$,则 $f(n)$ 为积性函数. 性质若 $ ...
Python——IO多路复用之select模块poll方法
Python——IO多路复用之select模块poll方法使用poll方法实现IO多路复用 .├── poll_client.py├── poll_server.py└── settings.py ...
A 题解————2019.10.16
[题目描述] 对于给定的一个正整数n, 判断n是否能分成若干个正整数之和 (可以重复) ,其中每个正整数都能表示成两个质数乘积. [输入描述]第一行一个正整数 q,表示询问组数.接下来 q 行,每行一 ...
haproxy 配置文件详解之 listen
配置示例: listen admin_stats bind mode http log 127.0.0.1 local0 err stats refresh 30s stats uri /haprox ...
分布式文件系统HDFS
利用Shell命令与HDFS进行交互以”./bin/dfs dfs”开头的Shell命令方式 1.目录操作在HDFS中为hadoop用户创建一个用户目录(hadoop用户) 启动hadoop 创建 ...
对称加密与非对称加密，及Hash算法
一 , 概述在现代密码学诞生以前,就已经有很多的加密方法了.例如,最古老的斯巴达加密棒,广泛应用于公元前7世纪的古希腊.16世纪意大利数学家卡尔达诺发明的栅格密码,基于单表代换的凯撒密码.猪圈密码, ...
[Gamma]Scrum Meeting#9
github 本次会议项目由PM召开,时间为6月4日晚上10点30分时长15分钟任务表格人员昨日工作下一步工作木鬼撰写博客,组织例会撰写博客,组织例会 swoip 前端显示屏幕,翻译坐 ...
jQuery前端生成二维码
引用: <script src="assets/js/jquery.qrcode.min.js" charset="UTF-8"></scri ...

下拉菜单旋转出现css

下拉菜单旋转出现css的更多相关文章

随机推荐

热门专题