#nav{ display: flex; } .menuopen{ display: none; } #nav .logo{ text-align: left; min-width: 400px; position: relative; z-index: 393; } #nav .new{ position: absolute; top: 16px; right: 0px; z-index: 393; } #nav ul{ margin: 40; padding: 0; } #nav li{ list-style-type: none; position: relative; margin: 0; padding: 0; height: 48px; font-weight: bold; line-height: 1; display: inline-block; } #nav li a{ position: relative; z-index: 2; display: block; padding: 6px 0 0 16px; height: 48px; overflow: hidden; color: #333; } #nav li span{ font-size: 12px; color: #333; } #nav li em{ display: block; font-size: 20px; } #nav li a:after { top: 0; left: 0; width: 100%; height: 100%; } #nav li a:hover{ text-decoration: none; color: #FF5820; } .lte-ie9 #nav li a:hover{ background: #393939; } #nav li a:hover span{ color: #FF5820; } #nav li a:hover:after{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } #nav li a, #nav li a:before, #nav li a:after{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } #nav li.nav_active a{ color: #D90000; } #nav li.nav_active span, #nav li.nav_active a:hover span{ color: #D90000; } #nav .disabled{ padding: 8px 0 0 16px; color: #C0C0C0; } #nav .disabled span{ color: #C0C0C0; } @media screen and (max-width: 768px){ #nav{ position: fixed; top: 0px; left: -180px; height: 100%; padding: 120px 0 0; background: #FFFFFF; overflow-x: hidden; border-top: 4px solid #D90000; -webkit-overflow-scrolling: touch; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; float: left; width: 180px; display: block } #nav ul{ height: 800px; overflow-y: auto; margin: 0; padding: 0; } #nav li{ list-style-type: none; position: relative; margin: 0; padding: 0; height: 48px; font-weight: bold; line-height: 1; border-top: 1px solid #EEEEEE; background: rgba(248,248,248,.4); display: block; } #nav li a{ position: relative; z-index: 2; display: block; padding: 6px 0 0 16px; height: 48px; overflow: hidden; color: #D90000; } /*#nav li a:before,#nav .disabled:before{ content: '*'; font-family: 'digimon'; font-size: 32px; display: block; width: 32px; height: 32px; font-style: normal; float: left; vertical-align: baseline; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } */ #nav li span{ font-size: 12px; color: #393939; } #nav li em{ display: block; font-size: 20px; } #nav li a:after { top: 0; left: 0; width: 100%; height: 100%; } #nav li a:hover{ text-decoration: none; color: #FFFFFF; } .lte-ie9 #nav li a:hover{ background: #393939; } #nav li a:hover span{ color: #FF5820; } #nav li a:hover:after{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; background: #393939; } #nav .disabled{ padding: 8px 0 0 16px; background: rgba(0,0,0,.2); color: #C0C0C0; } #nav .disabled span{ color: #C0C0C0; } #nav li a:after{ position: absolute; z-index: -1; display: block; content: ''; } #nav li a, #nav li a:before, #nav li a:after{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } #nav li.nav_active a{ background: #333; color: #FFF; } #nav li.nav_active span{ color: #FF5820; } #nav.open,.end.open{ -webkit-transform: translate3d(180px, 0, 0); transform: translate3d(180px, 0, 0); } .lte-ie9 #main.open { left: 180px; } .lte-ie9 #nav.open{ left: 0; } .menuopen{ display: block; position: fixed; z-index: 393; left: 0; top: 0; width: 224px; height: 128px; background: transparent url('images/menuopen.png') left top; text-indent:120%; white-space:nowrap; overflow:hidden; } .menuopen:hover{ background-position: right top; } #nav li.nav_active a{ background: #333; color: #FFF; } #nav li.nav_active span{ color: #FF5820; } } /*移动端下覆盖层*/ .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; background: rgba(0,0,0,.6); } /*LOGO变化及左菜单置顶*/ .drawer img { width: 100%; -webkit-transition: all .1s; -moz-transition: all .1s; -ms-transition: all .1s; -o-transition: all .1s; transition: all .1s; } .drawer2 img { width: 180px; -webkit-transition: all .1s; -moz-transition: all .1s; -ms-transition: all .1s; -o-transition: all .1s; transition: all .1s; } .drawer2 { position: fixed; top:0; }