공지사항 탭메뉴 만들기

 <section id="help">
      <div class="container">
         <div class="row">
            <div class="help clearfix">
               <article class="h_box1">
                  <h3>공지사항</h3>
                  <div class="notice">
                     <ul>
                        <li class="active"><a href="#">전체 공지</a>
                           <ul>
                              <li>
                                 <dl>
                                    <dt><strong class="bar">전체</strong><em>2020.01.04</em></dt>
                                    <dd>[무대인사] <해치지않아> 1주차 (1/18~1/19)</dd>
                                 </dl>
                              </li>
                              <li>
                                 <dl>
                                    <dt><strong class="bar">전체</strong><em>2020.01.04</em></dt>
                                    <dd>[공지] 메가박스 이용약관 변경 안내</dd>
                                 </dl>
                              </li>
                              <li>
                                 <dl>
                                    <dt><strong class="bar">전체</strong><em>2020.01.03</em></dt>
                                    <dd>[공지] LG유플러스 제휴서비스 종료 안내</dd>
                                 </dl>
                              </li>
                              <li>
                                 <dl>
                                    <dt><strong class="bar">전체</strong><em>2020.01.03</em></dt>
                                    <dd>[라이브뷰잉] 가정교사 히트맨 REBORN! the STAGE -vs VARIA partⅡ 진행 안내</dd>
                                 </dl>
                              </li>
                           </ul>
                        </li>
                        <li><a href="#">영화관 공지</a>
                           <ul style="display:none">
                              <li>
                                 <dl>
                                    <dt><strong class="bar">경기/ 영통</strong><em>2020.01.04</em></dt>
                                    <dd>[영통] 화재경보기 오작동 관련 안내</dd>
                                 </dl>
                              </li>
                              <li>
                                 <dl>
                                    <dt><strong class="bar">경기/ 양주</strong><em>2020.01.04</em></dt>
                                    <dd>[양주점] 요금기준 변경 안내</dd>
                                 </dl>
                              </li>
                              <li>
                                 <dl>
                                    <dt><strong class="bar">부산/대구/경상</strong><em>2020.01.03</em></dt>
                                    <dd>[문경] 2020년 1월 휴관일 안내</dd>
                                 </dl>
                              </li>
                              <li>
                                 <dl>
                                    <dt><strong class="bar">광주/전라</strong><em>2020.01.03</em></dt>
                                    <dd>[목포] 영업 종료 안내</dd>
                                 </dl>
                              </li>
                           </ul>
                        </li>
                     </ul>
                  </div>
               </article>
               <article class="h_box2"></article>
               <article class="h_box3"></article>
            </div>
         </div>
      </div>
   </section>
   <!--//help-->

 

 

style.css

/* help */
.help {overflow: hidden; padding-bottom: 200px;   }
.help > article {float: left; width: 32%; margin-right: 2%; height: 350px;}
.help > article:last-child {margin-right: 0;}
.help article > div {border: 1px solid #dbdbdb; height: 350px;}
.help article h3  {font-size: 30px; font-weight: 500; margin-bottom: 20px;}  

/* h_box1 */
.notice {padding: 17px; position: relative;}
.notice ul {overflow: hidden;}
.notice ul li {float: left; text-align: center; margin-right: -1px;}
.notice ul li a {border: 1px solid #dbdbdb; font-size: 15px; color: #666; display: block; width: 80px; padding: 10px 20px; background-color: #f5f5f5;}
.notice ul li.active a {background-color: #fff;}
.notice ul li ul {position: absolute; left: 17px; top:70px; width: 90%; }
.notice ul li ul li {text-align: left; padding: 17px; border-bottom: 1px solid #dbdbdb; width: 100%; box-sizing: border-box;}
.notice ul li ul li:last-child {border-bottom:0 solid #000;}

.notice ul li ul li dt em{color: #999;}
.notice ul li ul li dt strong.bar {position: relative; padding-right: 10px;}
.notice ul li ul li dt strong.bar:after{content: ''; position: absolute; top: 4px; right: 5px; width: 1px; height: 12px; background: #999;}
.notice ul li ul li dd {color: #777; padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}