HTML_CSS_021_tag_연습_메뉴만들기_01

html

<nav class="menu-1">
  <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>
</nav>

<nav class="menu-1 menu-2">
  <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>
</nav>
<nav class="menu-1 menu-3">
  <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>
</nav>

css

body{
/*   color: black; */
  font-weight:bold; 
}
a {
  color: inherit;
  text-decoration: inherit;
  display: inline-block;
}
ul,
li {
  list-style: none;
  /* 들여쓰기 제거*/
  padding: 0;
  margin: 0;
}
.menu-1 {
  margin-top: 70px;
  text-align: center;
}
/* 메뉴 */
.menu-1 > ul {
  background-color: rgba(0,0,0,0.3);
  display: inline-block;
  padding: 0 20px;
  border-radius: 10px;
}
/* 메뉴 아이템 리스트 */
.menu-1 > ul > li {
  display: inline-block;
  width : 150px;

}
.menu-1 > ul > li > a {
  padding: 10px;  
    display: block;
}
.menu-1 > ul > li:hover > a {
  background-color: black;
  color: white;
}
.menu-1.menu-2 > ul > li > a {
  padding: 10px;  
  display: block;
  color: red;
}

.menu-1.menu-3 > ul > li > a {
  padding: 10px;  
  display: block;
  color: gold;
}