[CSS] 텝 메뉴 메뉴명 이미지로 작성

.tabmenu{
  max-width:100%;
  margin: 0 auto;
  position:relative;
}
.tabmenu ul li{
  display:  inline-block;
  width:20%;
  float:left;
  text-align:center;
  background :#f9f9f9;
  line-height:40px;
}
.tabmenu label{
  display:block;
  width:100%;
  height:200px;
  line-height:40px;
  vertical-align: middle;
}
.tabmenu input{display:none;}
.tabCon{
  display:none;
  text-align:left;
  padding: 15px 0 ;
  position:absolute;
  left:0; top:200px;
  box-sizing: border-box;
  border : 5px solid #f9f9f9;
}
.tabCon li{
  margin-right: 80px;
}
.tabCon li:last-child{
  margin-right: 0;
}
.tabmenu .btnCon:nth-child(1) .btnCon:nth-child(1) label img{
}
.tabmenu .btnCon:nth-child(1) input ~ label  {
  background: no-repeat center/70%  url('img/main/product01.png' );
}
.tabmenu .btnCon:nth-child(1) input:checked  ~ label{
  background: no-repeat center/70%  url('img/main/product01_o.png' );
}
.tabmenu .btnCon:nth-child(2) input ~ label  {
  background: no-repeat center/70%  url('img/main/product02.png' );
}
.tabmenu .btnCon:nth-child(2) input:checked  ~ label{
  background: no-repeat center/70%  url('img/main/product02_o.png' );
}
.tabmenu .btnCon:nth-child(3) input ~ label  {
  background: no-repeat center/70%  url('img/main/product03.png' );
}
.tabmenu .btnCon:nth-child(3) input:checked  ~ label{
  background: no-repeat center/70%  url('img/main/product03_o.png' );
}
.tabmenu .btnCon:nth-child(4) input ~ label  {
  background: no-repeat center/70%  url('img/main/product04.png' );
}
.tabmenu .btnCon:nth-child(4) input:checked  ~ label{
  background: no-repeat center/70%  url('img/main/product04_o.png' );
}
.tabmenu .btnCon:nth-child(5) input ~ label  {
  background: no-repeat center/70%  url('img/main/product05.png' );
}
.tabmenu .btnCon:nth-child(5) input:checked  ~ label{
  background: no-repeat center/70%  url('img/main/product05_o.png' );
}
.tabmenu input:checked ~ .tabCon{
  display:block;
}

<div class="tabmenu">
        <ul>
          <li id="tab1" class="btnCon">
            <input type="radio" checked name="tabmenu" id="tabmenu1">
            <label class="tablb" for="tabmenu1">
            </label>
            <div class="tabCon" >
              <ul>
                <li><a href="#"><img src="img/main/pro_ex_img01.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img02.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img03.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img04.png"/></a></li>
              </ul>
          </li>
          <li id="tab2" class="btnCon"><input type="radio" name="tabmenu" id="tabmenu2">
            <label class="tablb"  for="tabmenu2">
            </label>
            <div class="tabCon"  >
              <ul>
                <li><a href="#"><img src="img/main/pro_ex_img01.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img03.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img04.png"/></a></li>
              </ul>
          </li>
          <li id="tab3" class="btnCon"><input type="radio" name="tabmenu" id="tabmenu3">
            <label class="tablb"  for="tabmenu3">
            </label>
            <div class="tabCon" >
              <ul>
                <li><a href="#"><img src="img/main/pro_ex_img01.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img04.png"/></a></li>
              </ul>
          </li>
          <li id="tab4" class="btnCon"><input type="radio" name="tabmenu" id="tabmenu4">
            <label class="tablb"  for="tabmenu4">
            </label>
            <div class="tabCon" >
              <ul>
                <li><a href="#"><img src="img/main/pro_ex_img01.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img02.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img03.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img04.png"/></a></li>
              </ul>
          </li>
          <li id="tab5" class="btnCon"><input type="radio" name="tabmenu" id="tabmenu5">
            <label class="tablb"  for="tabmenu5">
            </label>
            <div class="tabCon" >
              <ul>
                <li><a href="#"><img src="img/main/pro_ex_img01.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img02.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img03.png"/></a></li>
                <li><a href="#"><img src="img/main/pro_ex_img04.png"/></a></li>
              </ul>
          </li>
        </ul>
      </div>