.tabs { overflow: hidden; width: 100%; list-style: none; } .tabs li { float: left; width: 50%; } .tabs a { display: block; width: 100%; padding-left: 40px; box-sizing: border-box; height: 60px; line-height: 60px; text-decoration: none; background: #c9dcf6; color: #000; } .tabs a:hover, .tabs a:focus, .tabs .current { background: #1175d4; color: #fff; } .war-tabs.tabs { display: inline-block; width: auto; position: absolute; right: 0; top: -40px; z-index: 20 } .war-tabs.tabs li { width: auto } .war-tabs.tabs li a { display: inline-block; width: auto; padding: 0 20px; height: 50px; line-height: 50px; background: transparent } .war-tabs.tabs a:hover, .war-tabs.tabs a:focus, .war-tabs.tabs .current { background: #ca201e } .war-tabs-classify { padding: 10px 40px 20px } .war-tabs-classify li { margin-top: 10px } .war-tabs-classify li a { display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; background: #fff; color: #000 } .war-tabs-classify li a:hover, .war-tabs-classify li a.current { background: #ca201e; color: #fff } .international-tabs.tabs li { width: 33.33% } .international-tabs.tabs li a, .ei-tabs.tabs li a { text-align: center; padding: 0; color: #000 } .international-tabs.tabs li:nth-of-type(odd) a, .ei-tabs.tabs li a { background: #f4f4f4 } .international-tabs.tabs li:nth-of-type(even) a { background: #fafafa } .international-tabs.tabs li:nth-of-type(odd) a:hover, .international-tabs.tabs li:nth-of-type(odd) a:focus, .international-tabs.tabs li:nth-of-type(odd) .current, .international-tabs.tabs li:nth-of-type(even) a:hover, .international-tabs.tabs li:nth-of-type(even) a:focus, .international-tabs.tabs li:nth-of-type(even) .current, .ei-tabs.tabs a:hover, .ei-tabs.tabs a:focus, .ei-tabs.tabs .current { background: #d31519; color: #fff } @media ( max-width:800px ) { .war-tabs.tabs { display: none } .war-tabs-classify { padding: 10px 20px 20px } }