.header { height: 40px; background: #333; line-height: 40px; } .header .left li, .header .right li { display: inline-block; } .header .left li a, .right li:nth-child(-n+3) a { position: relative; margin-right: 10px; } .header .left li a::after, .right li:nth-child(-n+3) a::after { content: ""; width: 1.6px; height: 16px; background: #424242; position: absolute; top: 50%; transform: translateY(-50%); margin: 0 7px; } .header .left li:last-child a::after, .right li:nth-child(3) a::after { content: " "; position: static; } .right li:last-child { width: 120px; height: 40px; margin-left: 15px; color: #b0b0b0; background: #424242; text-align: center; position: relative; } .right li:last-child .dorp { width: 316px; height: 0; color: #424242; box-shadow: 0 2px 10px rgb(0 0 0 / 15%); background: #fff; position: absolute; right: 0; line-height: 100px; font-size: 12px; transition: height .3s; } .right li:last-child span { display: none; transition: all 1s ease 3s; } .right li:last-child:hover span { display: block; } .right li:last-child:hover .dorp { height: 100px; } .right li:last-child i{ margin-right: 4px; font-size: 20px; vertical-align: -2px; } .header a { color: #b0b0b0; } .search { margin-top: 25px; overflow: hidden; } .search .logo { width: 55px; height: 55px; background: #ff6700 url("../img/mi-logo.png"); background-position: center; } .search ul { margin-left: 187px; height: 55px; line-height: 55px; } .search ul li { float: left; padding: 0 10px; } .search ul li a{ color: #333; } .search .keyword { width: 296px; height: 50px; border: 1px solid #e0e0e0; } .search .keyword input{ width: 245px; height: 48px; border: none; outline: none; padding-left: 10px; padding-right: 10px; box-sizing: border-box; border-right: 1px solid #e0e0e0; } .search .s_icon { width: 51px; height: 48px; text-align: center; line-height: 48px; } .search .s_icon:hover { background: #ff6700; } .search .s_icon:hover i { color: #fff; } .search .keyword i{}