.filter-mask, .filter-body { position: absolute; left: 0; right: 0; top: 0; } .filter-mask { height: 100%; background: rgba(0,0,0,0.1); } .filter-body { background: #fff; color: #000; cursor: pointer; font-size: 14PX; height: 440PX; .classify { width: 50%; height: 100%; background: #f8f8f8; > li { height: 60PX; line-height: 60PX; > * { box-sizing: border-box; } &.active { background: #fff; } .shower { padding-left: 20PX; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #333; &.highlight { background: #eee; } } .default { color: #999; } .title { float: left; color: #000; } } } .sub-classify { position: absolute; display: none; width: 50%; height: 440PX; left: 50%; top: 0; overflow: auto; -webkit-overflow-scrolling: touch; > li { height: 60PX; line-height: 60PX; padding-left: 15PX; border-bottom: 1PX solid #e6e6e6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; &.highlight { background: #eee; } } .chosed-icon { display: none; } .chosed .chosed-icon { display: inline; } } .active > .sub-classify { display: block; } }