<details>
  <summary>사내 공지사항</summary>
  <ul>
    <li><a href="#">1. 공지사항 1번입니다.</a></li>
    <li><a href="#">2. 공지사항 2번입니다.</a></li>
    <li><a href="#">3. 공지사항 3번입니다.</a></li>
  </ul>
</details>

<details>
  <summary>사내 최고봉</summary>
  <div class="txt">사장님</div>
</details>
*{margin:0; padding:0;}
ul{list-style:none;}
a{text-decoration:none; color:#333;}
details{margin-bottom:10px;}
details summary{padding:0 10px; background:#000; color:#fff; height:35px; line-height:35px; font-weight:bold; cursor:pointer;}
details summary::marker{font-size:0;}
details ul{border:1px solid #aaa;}
details ul li a{display:block; padding:5px 10px;}
details ul li a:hover{background:#333; color:#fff;}
details .txt{border:1px solid #999; padding:5px 10px; text-align:center;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.