커서를 올리면 밝아지는 구 만들기 -> 메뉴 리스트로 응용하기

<!-- nav>section>div*4>a[href=#]{메뉴 아이템 $} -->

<!-- 메뉴 박스(메뉴를 감싸는 부모) -->
<div class="menu-box">
  <!-- 메뉴 -->
  <div>
    <!-- 메뉴 아이템 -->
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 1</div>
    </div>
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 2</div>
    </div>
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 3</div>
    </div>
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 4</div>
    </div>
  </div>
</div>





/css/

/* 노말라이즈 */
a {
  color:inherit;
  text-decoration:none;
}

/* 커스텀 */

/* 메뉴박스 */
.menu-box {
  text-align:center;
}

/* 메뉴 */
.menu-box > div {
  /* 메뉴에는 배경색이 있다. */
  background-color:#dfdfdf;
  /* 메뉴는 너비가 최대한 줄어든다. */
  display:inline-block;
  border-radius:5px;
  padding:0 10px;
}

/* 메뉴 아이템 */
.menu-box > div > div {
  /* 메뉴 아이템은 너비가 최대한 줄어들고 한줄에 여러개 나온다. */
  display:inline-block;
}

/* 메뉴 아이템 텍스트 */
.menu-box > div > div > div {
  padding:10px;
  /* 커서를 포인터로 바꿈 */
  cursor:pointer;
}

/* 마우스가 올려진 메뉴 아이템의 자식인 텍스트 */
.menu-box > div > div:hover > div {
  background-color:black;
  color:white;
}