div+css实现自适应垂直多级菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css实现自适应垂直多级菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
    html,body,aside {
        display:block;
        margin:0;
        padding:0
}
body {
        padding:40px;
        background-attachment:fixed;
        background-position:50% 0;
        background-size:cover
}
aside {
        width:233px;
        min-height:500px
}
aside.right {
        margin-left:auto
}
a {
        text-decoration:underline
}
a:hover {
        text-decoration:none
}
.body {
        max-width:1200px;
        margin:0 auto
}
@media screen and (max-width:1000px) {
        body {
        padding:20px
}
}@media screen and (max-width:767px) {
        body {
        padding:10px
}
aside {
        width:auto
}
}.sky-mega-menu,.sky-mega-menu * {
        margin:0;
        padding:0;
        outline:0;
        border:0;
        background:0
}
.sky-mega-menu {
        font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif
}
.sky-mega-menu {
        position:relative;
        z-index:999;
        background:rgba(255,255,255,0.9);
        box-shadow:0 0 20px rgba(0,0,0,.3);
        font-size:0;
        line-height:0;
        text-align:right
}
.sky-mega-menu:after {
        content:'';
        display:table;
        clear:both
}
.sky-mega-menu li {
        position:relative;
        display:inline-block;
        float:left;
        padding:5px;
        border-style:solid;
        border-color:rgba(0,0,0,.1);
        border-right-width:1px;
        font-size:13px;
        line-height:45px;
        text-align:left;
        white-space:nowrap
}
.sky-mega-menu li a {
        display:block;
        padding:0 20px;
        text-decoration:none;
        color:#666;
        transition:background .4s,color .4s;
        -o-transition:background .4s,color .4s;
        -ms-transition:background .4s,color .4s;
        -moz-transition:background .4s,color .4s;
        -webkit-transition:background .4s,color .4s
}
.sky-mega-menu li>div {
        position:absolute;
        z-index:1000;
        top:100%;
        left:-9999px;
        margin-top:8px;
        background:rgba(255,255,255,0.9);
        box-shadow:0 0 8px rgba(0,0,0,.3);
        opacity:0;
        -o-transform-origin:0 0;
        -ms-transform-origin:0 0;
        -moz-transform-origin:0 0;
        -webkit-transform-origin:0 0;
        -o-transition:-o-transform .4s,opacity .4s;
        -ms-transition:-ms-transform .4s,opacity .4s;
        -moz-transition:-moz-transform .4s,opacity .4s;
        -webkit-transition:-webkit-transform .4s,opacity .4s
}
.sky-mega-menu li>div:after {
        content:'';
        position:absolute;
        bottom:100%;
        left:0;
        width:100%;
        height:8px;
        background:transparent
}
.sky-mega-menu li>div:before {
        content:'';
        position:absolute;
        bottom:100%;
        left:24px;
        border-right:5px solid transparent;
        border-bottom:5px solid rgba(255,255,255,0.9);
        border-left:5px solid transparent
}
.sky-mega-menu li:hover>a,.sky-mega-menu li.current>a {
        background:#2da5da;
        color:#fff
}
.sky-mega-menu li:hover>div {
        left:0;
        opacity:1;
        -webkit-transform:translate(0,0)
}
.sky-mega-menu .right {
        float:none;
        border-right-width:0;
        border-left-width:1px
}
.sky-mega-menu .right>div {
        -o-transform-origin-x:100%;
        -ms-transform-origin-x:100%;
        -moz-transform-origin-x:100%;
        -webkit-transform-origin-x:100%
}
.sky-mega-menu .right:hover>div {
        right:0;
        left:auto
}
.sky-mega-menu .right:hover>div:before {
        right:24px;
        left:auto
}
.sky-mega-menu .switcher {
        display:none
}
.sky-mega-menu li li {
        display:block;
        float:none;
        border-width:0;
        border-top-width:1px;
        line-height:21px;
        white-space:normal
}
.sky-mega-menu li li:first-child {
        border-top:0
}
.sky-mega-menu li li a {
        padding-top:12px;
        padding-bottom:12px
}
.sky-mega-menu li li>div {
        top:0;
        margin:0 0 0 8px
}
.sky-mega-menu li li>div:after {
        top:0;
        right:100%;
        bottom:auto;
        left:auto;
        width:8px;
        height:100%
}
.sky-mega-menu li li>div:before {
        top:22px;
        right:100%;
        bottom:auto;
        left:auto;
        border-top:5px solid transparent;
        border-right:5px solid rgba(255,255,255,0.9);
        border-bottom:5px solid transparent
}
.sky-mega-menu li li:hover>div {
        left:100%
}
.sky-mega-menu .right li>div {
        margin:0 8px 0 0;
        -o-transform-origin-x:100%;
        -ms-transform-origin-x:100%;
        -moz-transform-origin-x:100%;
        -webkit-transform-origin-x:100%
}
.sky-mega-menu .right li>div:after {
        right:auto;
        left:100%
}
.sky-mega-menu .right li>div:before {
        right:auto;
        left:100%;
        border-right:0;
        border-left:5px solid rgba(255,255,255,0.9)
}
.sky-mega-menu .right li:hover>div {
        right:100%;
        left:auto
}
.sky-mega-menu-fixed {
        position:fixed;
        top:0;
        left:0;
        width:100%
}
.sky-mega-menu-pos-bottom li>div {
        top:auto;
        bottom:100%;
        margin:0 0 8px;
        -o-transform-origin-y:100%;
        -ms-transform-origin-y:100%;
        -moz-transform-origin-y:100%;
        -webkit-transform-origin-y:100%
}
.sky-mega-menu-pos-bottom li>div:after {
        top:100%;
        bottom:auto
}
.sky-mega-menu-pos-bottom li>div:before {
        top:100%;
        bottom:auto;
        border-top:5px solid rgba(255,255,255,0.9);
        border-right:5px solid transparent;
        border-bottom:0;
        border-left:5px solid transparent
}
.sky-mega-menu-pos-bottom li li>div {
        top:auto;
        bottom:0
}
.sky-mega-menu-pos-bottom li li>div:before {
        top:auto;
        bottom:22px
}
.sky-mega-menu-pos-bottom.sky-mega-menu-fixed {
        top:auto;
        bottom:0
}
.sky-mega-menu-pos-left li,.sky-mega-menu-pos-right li {
        display:block;
        float:none;
        border-width:0;
        border-top-width:1px
}
.sky-mega-menu-pos-left li:first-child,.sky-mega-menu-pos-right li:first-child {
        border-top:0
}
.sky-mega-menu-pos-left li>div,.sky-mega-menu-pos-right li>div {
        top:0
}
.sky-mega-menu-pos-left li>div {
        margin:0 0 0 8px
}
.sky-mega-menu-pos-right li>div {
        margin:0 8px 0 0;
        -o-transform-origin-x:100%;
        -ms-transform-origin-x:100%;
        -moz-transform-origin-x:100%;
        -webkit-transform-origin-x:100%
}
.sky-mega-menu-pos-left li>div:after,.sky-mega-menu-pos-right li>div:after {
        top:0;
        bottom:auto;
        width:8px;
        height:100%
}
.sky-mega-menu-pos-left li>div:after {
        right:100%;
        left:auto
}
.sky-mega-menu-pos-right li>div:after {
        right:auto;
        left:100%
}
.sky-mega-menu-pos-left li>div:before,.sky-mega-menu-pos-right li>div:before {
        top:22px;
        bottom:auto;
        border-top:5px solid transparent;
        border-bottom:5px solid transparent
}
.sky-mega-menu-pos-left li>div:before {
        right:100%;
        left:auto;
        border-right:5px solid rgba(255,255,255,0.9)
}
.sky-mega-menu-pos-right li>div:before {
        right:auto;
        left:100%;
        border-left:5px solid rgba(255,255,255,0.9)
}
.sky-mega-menu-pos-left li:hover>div {
        left:100%
}
.sky-mega-menu-pos-right li:hover>div {
        right:100%;
        left:auto
}
.sky-mega-menu-pos-left .bottom>div,.sky-mega-menu-pos-right .bottom>div {
        top:auto;
        bottom:0;
        -o-transform-origin-y:100%;
        -ms-transform-origin-y:100%;
        -moz-transform-origin-y:100%;
        -webkit-transform-origin-y:100%
}
.sky-mega-menu-pos-left .bottom>div:before,.sky-mega-menu-pos-right .bottom>div:before {
        top:auto;
        bottom:22px
}
.sky-mega-menu-pos-right li li>div {
        margin:0 8px 0 0;
        -o-transform-origin-x:100%;
        -ms-transform-origin-x:100%;
        -moz-transform-origin-x:100%;
        -webkit-transform-origin-x:100%
}
.sky-mega-menu-pos-right li li>div:after {
        right:auto;
        left:100%
}
.sky-mega-menu-pos-right li li>div:before {
        right:auto;
        left:100%;
        border-right:0;
        border-left:5px solid rgba(255,255,255,0.9)
}
.sky-mega-menu-pos-right li li:hover>div {
        right:100%;
        left:auto
}
.sky-mega-menu-pos-left.sky-mega-menu-fixed {
        top:0;
        right:auto;
        bottom:0;
        left:0;
        width:auto
}
.sky-mega-menu-pos-right.sky-mega-menu-fixed {
        top:0;
        right:0;
        bottom:0;
        left:auto;
        width:auto
}
.sky-mega-menu-anim-slide li>div {
        -o-transform:translate(0,60px);
        -ms-transform:translate(0,60px);
        -moz-transform:translate(0,60px);
        -webkit-transform:translate(0,60px)
}
.sky-mega-menu-pos-bottom.sky-mega-menu-anim-slide li>div {
        -o-transform:translate(0,-60px);
        -ms-transform:translate(0,-60px);
        -moz-transform:translate(0,-60px);
        -webkit-transform:translate(0,-60px)
}
.sky-mega-menu-anim-slide li:hover>div {
        -o-transform:translate(0,0);
        -ms-transform:translate(0,0);
        -moz-transform:translate(0,0);
        -webkit-transform:translate(0,0)
}
.sky-mega-menu-anim-scale li>div {
        -o-transform:scale(0,0);
        -ms-transform:scale(0,0);
        -moz-transform:scale(0,0);
        -webkit-transform:scale(0,0)
}
.sky-mega-menu-anim-scale li:hover>div {
        -o-transform:scale(1,1);
        -ms-transform:scale(1,1);
        -moz-transform:scale(1,1);
        -webkit-transform:scale(1,1)
}
.sky-mega-menu-anim-flip {
        perspective:2000px;
        -o-perspective:2000px;
        -moz-perspective:2000px;
        -webkit-perspective:2000px
}
.sky-mega-menu-anim-flip li>div {
        transform-style:preserve-3d;
        -o-transform-style:preserve-3d;
        -moz-transform-style:preserve-3d;
        -webkit-transform-style:preserve-3d;
        transform:rotateX(-75deg);
        -o-transform:rotateX(-75deg);
        -moz-transform:rotateX(-75deg);
        -webkit-transform:rotateX(-75deg)
}
.sky-mega-menu-anim-flip li:hover>div {
        transform:rotateX(0deg);
        -o-transform:rotateX(0deg);
        -moz-transform:rotateX(0deg);
        -webkit-transform:rotateX(0deg)
}
.sky-mega-menu .grid-column {
        float:left;
        border-color:#d9d9d9;
        border-left-width:1px;
        border-left-style:solid
}
.sky-mega-menu .grid-column:first-child {
        margin-left:0;
        border-left:0
}
.sky-mega-menu .grid-column2,.sky-mega-menu .grid-container2 {
        width:155px
}
.sky-mega-menu .grid-column3,.sky-mega-menu .grid-container3 {
        width:233px
}
.sky-mega-menu .grid-column4,.sky-mega-menu .gri.........完整代码请登录后点击上方下载按钮下载查看