下拉菜单旋转出现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 ...

随机推荐

Debian9下安装Python3 pip
Debian9下安装Python3 pip 使用apt-get安装Python3-pip包 apt-get install python3-pip
[PHP] PHP汉字转拼音的方法
PHP汉字转拼音的方法代码如下: <?php // 此类是依据ASCII码转换,GB2312库对多音字也无能为力. // GB2312标准共收录6763个汉字,不在范围内的汉字是无法转换,如: ...
memcpy和strcpy的区别
strcpy和memcpy主要有以下3方面的区别. 复制的内容不同.strcpy只能复制字符串,而memcpy可以复制任意内容,例如字符数组.整型.结构体.类等. 复制的方法不同.strcpy不需要指 ...
10-排序5 PAT Judge (25 分)
The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...
C语言实现聊天室软件
/* common.h */ /*服务器端口信息*/ #define PORTLINK ".charport" /*缓存限制*/ #define MAXNAMELEN 256 #d ...
stacking method house price in kaggle top10%
整合几部分代码的汇总隐藏代码片段导入python数据和可视化包导入统计相关的工具导入回归相关的算法导入数据预处理相关的方法导入模型调参相关的包读取数据特征工程缺失值类别特征处理-l ...
在myecplice中关联svn
1:下载插件 site-1.8.22 2:找到myecplic的安装目录下的dropins 文件夹(例如:C:\Users\han\AppData\Local\MyEclipse Professio ...
[环境部署] Linux搭建SVN服务器之Centos篇
使用 service iptables stop 关闭防火墙安装步骤如下: 1.yum install subversion2.输入rpm -ql subversion查看安装位置,如下:rpm - ...
storm杂记+性能调优
1.默认情况下: 1个supervisor节点启动4个worker进程. 每一个topology默认占用一个worker进程. 每个worker会启动executor. 每个executor默认启动一 ...
bolt继承关系和区别
先上个图: 具体区别: IRichBolt/IBasicBolt 区别IRichBolt和IBasicBolt IRichBolt继承自IBolt和IComponent.IBasicBolt继承自I ...

下拉菜单旋转出现css

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

随机推荐

热门专题