/* 头部部分 */
.header {
     width: 100%;
     height: 40px;
     line-height: 40px;
     font-size: 12px;
     background-color: #333333;
}

.wrap{
     width: 1226px;
     margin: 0 auto;    
}

.header-left{
     float: left;
}

.header-right{
     float: right;
}

.header li{
     float: left;
     position: relative;
    
}
.header a{
     color: #b0b0b0;
     
     text-decoration: none;
}

.header a:hover{
     color: #ffffff;
}

.header span {
     margin: 6px;
     color: #424242;
}

.cart{
     position: relative;
    width: 120px;
    height: 40px;
    background-color: #424242;
    margin-left: 25px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    z-index: 800;
}
.cart i {
     margin-right: 4px;
}
.cart:hover{
     background-color: #fff;
}
/* 鼠标悬停在li上 里面的啊·字体颜色变橘色 */
.cart:hover>a{
     color: #ff6700;
}

/* 鼠标悬停下拉列表 */
.cart-list{
     position: absolute;
     top: 40px;
     right: 0;
     width: 316px;
     /* 高度设置为0 */
     height: 0;
     /* 文字内容溢出 */
     overflow: hidden;
     line-height: 100px;
     background-color: #fff;
     box-shadow: 0 2px 10px rgba(0,0,0,.15);
     transition: all .3s;
}
/* 
     可以过渡的属性：
     1）颜色
     2）数值
     3）阴影
     4）转换
*/
.cart:hover>.cart-list{
     height: 100px;
}

/* 下载app */
.download{
     z-index: 800;
     position: absolute;
     top: 40px;
     left: 50%;
     margin-left: -62px;
     width: 124px;
     height: 0;
     overflow: hidden;
     background-color: #fff;
     box-shadow: #aaa 0 1px 5px;
     transition: all .3s;
}

.download img{
     width: 90px;
     margin: 18px 17px 12px;
}
.download p {
     color: #333;
     font-size: 14px;
     text-align: center;
     margin-top: -16px;
}
.header-left>li:hover>.download {
     height: 148px;
}