header{ position: absolute; top: 0; left: 0; right: 0; height: 142px; z-index: 999; background: url(../imgs/header.png) no-repeat center top; background-size: 100% 100%; } header.fixed{ position: fixed; } header .up{ height: 35px; line-height: 35px; text-align: right; color: #fff; font-size: 14px; background: #005BAB; } header .up a{ color: #fff; opacity: 0.68; } header .up a:hover{ opacity: 1; } header .up span{ margin: 0 10px; opacity: 0.68; } header form{ position: relative; display: inline-flex; margin-left: 10px; } header input[type='text']{ width: 134px; line-height: 20px; padding-right: 25px; color: #fff; background: transparent; border-bottom: 1px solid rgba(255,255,255,0.38); } header input[type='submit']{ position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: url(../imgs/search.png) no-repeat; } header .logo{ position: absolute; left: 50%; top: 0; margin-left: -126px; transition: .3s; } .fixed .logo{ transform: scale(0.8); transform-origin: center top; } .menu{ padding-top: 10px; } .menu li{ position: relative; float: left; } .menu li>a{ color: #fff; font-size: 18px; display: block; width: 148px; height: 60px; line-height: 60px; text-align: center; } .menu li:hover>a{ background: #005BAB; border-radius: 10px 10px 0 0; } .menu dl{ position: absolute; top: 60px; left: 0; right: 0; background: rgba(0,0,0,.6); transform: scaleY(0); transform-origin: center top; transition: .3s; } .menu dl a{ display: block; line-height: 50px; color: #fff; font-size: 16px; text-align: center; } .menu dl a:hover{ background: #007aff; } .menu li:hover dl{ transform: scaleY(1); } .footer, .footer2{ position: relative; z-index: 2; } @media screen and (max-width: 768px) { header{ display: none; } }