ul 탭메뉴 채택완료

    

    

•       Tab1

      

    

•       Tab2

      

    

•       Tab3

      

-------------------------------css-----------------------------

label.panel-label {

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    display: block;

    width: 100%;

    color: #bdc3c7;

    cursor: pointer;

    background-color: #ecf0f1;

    -webkit-transition-property: background-color, color;

    transition-property: background-color, color;

    -webkit-transition-duration: 200ms;

    transition-duration: 200ms;

}

label.panel-label:hover {

    color: #003399;

}

#panels {

    background-color: white;

}

#panels .container {

    margin: 0 auto;

    width: 90%;

}

#panels section header label.panel-label {

    padding: 12px 24px;

    box-sizing: border-box;

}

#panels section main {

    box-sizing: border-box;

    max-height: 0;

    opacity: 0;

    -webkit-transition: opacity 600ms;

    transition: opacity 600ms;

    overflow-y: hidden;

}

#panel-1-ctrl:checked ~ #panels #panel-1 main {

    max-height: initial;

    opacity: 1;

    padding: 48px 24px;

}

#panel-2-ctrl:checked ~ #panels #panel-2 main {

    max-height: initial;

    opacity: 1;

    padding: 48px 24px;

}

#panel-3-ctrl:checked ~ #panels #panel-3 main {

    max-height: initial;

    opacity: 1;

    padding: 48px 24px;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {

    pointer-events: none;

    cursor: default;

    -webkit-transform: translate3d(0, 1px, 0);

    transform: translate3d(0, 1px, 0);

    box-shadow: none;

    border-right: none;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last {

    border-right: 1px solid transparent;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {

    border-left: 1px solid #dfdfdf;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {

    background-color: white;

    color: #003399;

    padding-top: 24px;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after {

    height: 6px;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {

    pointer-events: none;

    cursor: default;

    -webkit-transform: translate3d(0, 1px, 0);

    transform: translate3d(0, 1px, 0);

    box-shadow: none;

    border-right: none;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last {

    border-right: 1px solid transparent;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {

    border-left: 1px solid #dfdfdf;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {

    background-color: white;

    color: #003399;

    padding-top: 24px;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after {

    height: 6px;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {

    pointer-events: none;

    cursor: default;

    -webkit-transform: translate3d(0, 1px, 0);

    transform: translate3d(0, 1px, 0);

    box-shadow: none;

    border-right: none;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last {

    border-right: 1px solid transparent;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {

    border-left: 1px solid #dfdfdf;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {

    background-color: white;

    color: #003399;

    padding-top: 24px;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after {

    height: 6px;

}

ul#tabs-list {

    display: flex;

    justify-content: center;

    list-style: none;

    text-align: center;

    border-bottom: 1px solid #dfdfdf;

    margin: 0;

    padding: 0;

    text-align: center;

    border-bottom: 1px solid #dfdfdf;

}

ul#tabs-list li {

    display: flex;

    text-align: center;

    font-size: 0.875em;

    width: 18%;

    box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);

    border-right: 1px solid #dfdfdf;

    position: relative;

}

ul#tabs-list li:hover {

    -webkit-transition: none;

    transition: none;

    border-right: none;

}

ul#tabs-list li:hover.last {

    border-right: 1px solid transparent;

}

ul#tabs-list li:hover + li {

    border-left: 1px solid #dfdfdf;

}

ul#tabs-list li label.panel-label {

    position: relative;

    padding: 24px 0;

    font-size: 0.875em;

}

ul#tabs-list li label.panel-label::after {

    content: "";

    position: absolute;

    width: 100%;

    left: 0;

    bottom: 100%;

    background-color: #f16b6f;

    height: 0;

    -webkit-transition-property: height;

    transition-property: height;

    -webkit-transition-duration: 200ms;

    transition-duration: 200ms;

}

ul#tabs-list li label.panel-label:hover {

    padding-top: 24px;

}

ul#tabs-list li label.panel-label:hover::after {

    height: 6px;

}

main {

    width: 70%;

    margin: 0 auto;

}

.panel-radios {

    display: none;

}

body {

    background: #f16b6f;

    color: #444;

}

main p {

    line-height: 1.8;

}

크롬에서는 잘작동한느데

익스에서는 내용 위치가 각각 변해서 나옵니다 ㅜㅠㅜ

뭐가 문제일가요