V 31일차 - HTML과 CSS_3

<div class="menu1">
  <ul>
    <li><a href="#">메뉴 아이템 1</a></li>
    <li><a href="#">메뉴 아이템 2</a></li>
    <li><a href="#">메뉴 아이템 3</a></li>
    <li><a href="#">메뉴 아이템 4</a></li>
  </ul>
</div>
<div class="menu2">
  <ul>
    <li><a href="#">메뉴 아이템 1</a></li>
    <li><a href="#">메뉴 아이템 2</a></li>
    <li><a href="#">메뉴 아이템 3</a></li>
    <li><a href="#">메뉴 아이템 4</a></li>
  </ul>
</div>
<div class="menu3">
  <ul>
    <li><a href="#">메뉴 아이템 1</a></li>
    <li><a href="#">메뉴 아이템 2</a></li>
    <li><a href="#">메뉴 아이템 3</a></li>
    <li><a href="#">메뉴 아이템 4</a></li>
  </ul>
</div>

ul, li {
  list-style:none;
  margin:0;
  padding:0;
}
div {
  text-align:center;
}
div li {
  display:inline-block;
}
div > ul {
  display:inline-block;
  background-color: whitesmoke;
  margin-top:30px;
  margin-bottom:30px;
  padding:0 10px;
  border-radius:5px;
}
a{
  color:black;
  font-size:18px;
  text-decoration:none;
  background-color: whitesmoke;
  display:inline-block;
  padding:10px 60px;
}

.menu2 a {
  color: red;
}
.menu3 a {
  color: gold;
}

.menu1 li:hover > a {
  color:white;
  background-color: black;
}

.menu2 li:hover > a {
  background-color: black;
}


.menu3 li:hover > a {
  background-color: black;
}

위 코드 숙지하기!