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

@media screen and (min-width: 960px) {
    .dropdown-menu {
        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;
        left: 50%;
        display: inline-block !important;
        background: rgba(255,255,255,0);
        box-shadow: none;
        border: none;
        transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        visibility: hidden;
    }

        .dropdown-menu li {
            background: #fff;
            -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 > li:hover .dropdown-menu, .menu > li:focus .dropdown-menu {
        max-height: 2000px;
        z-index: 10;
    }

        .menu > li:hover .dropdown-menu li, .menu > li:focus .dropdown-menu li {
            opacity: 1;
            visibility: visible;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
    /*动画递进的时间 实现一个个螺旋子菜单*/
    .menu li:hover .dropdown-menu 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 .dropdown-menu 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 .dropdown-menu 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 .dropdown-menu 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 .dropdown-menu 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 .dropdown-menu 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 .dropdown-menu 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 .dropdown-menu li:nth-child(8) {
        -webkit-transition-delay: 350ms;
        -moz-transition-delay: 350ms;
        -ms-transition-delay: 350ms;
        -o-transition-delay: 350ms;
        transition-delay: 350ms;
    }


    .menu li:hover .dropdown-menu li:nth-child(9) {
        -webkit-transition-delay: 400ms;
        -moz-transition-delay: 400ms;
        -ms-transition-delay: 400ms;
        -o-transition-delay: 400ms;
        transition-delay: 400ms;
    }

    .menu li:hover .dropdown-menu li:nth-child(10) {
        -webkit-transition-delay: 450ms;
        -moz-transition-delay: 450ms;
        -ms-transition-delay: 450ms;
        -o-transition-delay: 450ms;
        transition-delay: 450ms;
    }

    .menu li:hover .dropdown-menu li:nth-child(11) {
        -webkit-transition-delay: 500ms;
        -moz-transition-delay: 500ms;
        -ms-transition-delay: 500ms;
        -o-transition-delay: 500ms;
        transition-delay: 500ms;
    }

    .menu li:hover .dropdown-menu li:nth-child(12) {
        -webkit-transition-delay: 550ms;
        -moz-transition-delay: 550ms;
        -ms-transition-delay: 550ms;
        -o-transition-delay: 550ms;
        transition-delay: 550ms;
    }

    .menu li:hover .dropdown-menu li:nth-child(13) {
        -webkit-transition-delay: 600ms;
        -moz-transition-delay: 600ms;
        -ms-transition-delay: 600ms;
        -o-transition-delay: 600ms;
        transition-delay: 600ms;
    }

    .menu li:hover .dropdown-menu li:nth-child(14) {
        -webkit-transition-delay: 650ms;
        -moz-transition-delay: 650ms;
        -ms-transition-delay: 650ms;
        -o-transition-delay: 650ms;
        transition-delay: 650ms;
    }

    .menu li:hover .dropdown-menu li:nth-child(15) {
        -webkit-transition-delay: 700ms;
        -moz-transition-delay: 700ms;
        -ms-transition-delay: 700ms;
        -o-transition-delay: 700ms;
        transition-delay: 700ms;
    }

    .menu li:hover .dropdown-menu li:nth-child(16) {
        -webkit-transition-delay: 750ms;
        -moz-transition-delay: 750ms;
        -ms-transition-delay: 750ms;
        -o-transition-delay: 750ms;
        transition-delay: 750ms;
    }


    .dropdown-menu li {
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
    }
}

@media screen and (max-width: 960px) {
    .top .navbar-toggle img {
        width: 50%;
    }

    .navbar-toggle {
        margin-right: 0;
        padding: 5px 0px;
    }
}