탭 메뉴에 아래쪽 화살표 추가

Question

현재 간단한 탭 메뉴에서 작업 중이며 탭이 활성화되어있을 때 아래쪽 화살표를 표시하려고합니다. 이것은 현재 작업중인 코드입니다. 나는 jQuery에서 몇 가지 시도를 해봤지만 운이 없었다. CSS가이 작업을 수행하는 가장 좋은 방법 인 것 같습니다. 나 맞아? 어떻게이 일을 완수하겠습니까?

Btw, 더 나은 스타일링을 위해 전체 페이지보기에서 코드를 확인하십시오. 당신 제공된 코드에서

.tab_menu { 
 
    margin: 40px 30px 0 30px; 
 
} 
 
ul.tab { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    background-color: rgba(68, 170, 255, 0.1); 
 
} 
 
/* Float the list items side by side */ 
 

 
ul.tab li { 
 
    border-left: 1px solid #ccc; 
 
    float: left; 
 
    margin-bottom: 0; 
 
    margin-left: 0; 
 
} 
 
/* Style the links inside the list items */ 
 

 
ul.tab li a { 
 
    display: inline-block; 
 
    color: black; 
 
    /* text-align: center; */ 
 
    padding: 14px 9px 14px 9px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
    margin: 0; 
 
    width: 150px; 
 
    height: 35px; 
 
    text-align: center; 
 
} 
 
/* Change background color of links on hover */ 
 

 
ul.tab li a:hover { 
 
    background-color: rgba(68, 170, 255, 0.5); 
 
} 
 
/* Create an active/current tablink class */ 
 

 
ul.tab li a:focus, 
 
.active { 
 
    background-color: rgba(68, 170, 255, 0.9); 
 
} 
 
/* Style the tab content */ 
 

 
.tabcontent { 
 
    display: none; 
 
    padding: 25px 12px; 
 
    border: 1px solid #ccc; 
 
    border-top: none; 
 
} 
 
.tab_menu a { 
 
    text-align: center; 
 
} 
 
.triangle-bottom { 
 
    border-top: solid 20px #54b1ff; 
 
    border-left: solid 25px transparent; 
 
    border-right: solid 25px transparent; 
 
    width: 0; 
 
    height: 0; 
 
    position: absolute; 
 
    margin-left: 168px;

<div class="tab_menu"> 
 
    <ul class="tab"> 
 
    <li><a href="javascript:void(0)" class="active tablinks" onclick="openContent(event, 'coverage');" id="defaultOpen">Our Coverage</a> 
 
     <div class="triangle-bottom"></div> 
 
    </li> 
 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openContent(event, 'claims')">Common Claims</a> 
 
    </li> 
 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openContent(event, 'bwc')">Buy With Confidence</a> 
 
    </li> 
 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openContent(event, 'faq')">Frequently Asked Questions</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

, 단지 아래쪽 화살표가 표시되어야합니다 작업

.triangle-bottom { 
    margin-left: 119px; 
} 

.tab_menu { 
 
    margin: 40px 30px 0 30px; 
 
} 
 
ul.tab { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    background-color: rgba(68, 170, 255, 0.1); 
 
} 
 
/* Float the list items side by side */ 
 

 
ul.tab li { 
 
    border-left: 1px solid #ccc; 
 
    float: left; 
 
    margin-bottom: 0; 
 
    margin-left: 0; 
 
} 
 
/* Style the links inside the list items */ 
 

 
ul.tab li a { 
 
    display: inline-block; 
 
    color: black; 
 
    /* text-align: center; */ 
 
    padding: 14px 9px 14px 9px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
    margin: 0; 
 
    width: 150px; 
 
    height: 35px; 
 
    text-align: center; 
 
} 
 
/* Change background color of links on hover */ 
 

 
ul.tab li a:hover { 
 
    background-color: rgba(68, 170, 255, 0.5); 
 
} 
 
/* Create an active/current tablink class */ 
 

 
ul.tab li a:focus, 
 
.active { 
 
    background-color: rgba(68, 170, 255, 0.9); 
 
} 
 
/* Style the tab content */ 
 

 
.tabcontent { 
 
    display: none; 
 
    padding: 25px 12px; 
 
    border: 1px solid #ccc; 
 
    border-top: none; 
 
} 
 
.tab_menu a { 
 
    text-align: center; 
 
} 
 
.triangle-bottom { 
 
    border-top: solid 20px #54b1ff; 
 
    border-left: solid 25px transparent; 
 
    border-right: solid 25px transparent; 
 
    width: 0; 
 
    height: 0; 
 
    position: absolute; 
 
    margin-left: 119px; 
 
    }

<div class="tab_menu"> 
 
    <ul class="tab"> 
 
    <li><a href="javascript:void(0)" class="active tablinks" onclick="openContent(event, 'coverage');" id="defaultOpen">Our Coverage</a> 
 
     <div class="triangle-bottom"></div> 
 
    </li> 
 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openContent(event, 'claims')">Common Claims</a> 
 
    </li> 
 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openContent(event, 'bwc')">Buy With Confidence</a> 
 
    </li> 
 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openContent(event, 'faq')">Frequently Asked Questions</a> 
 
    </li> 
 
    </ul> 
 
</div>