공부기록, 21-05-01

3차메뉴 만들기

 

HTML

nav.menu-box-1>ul>li*3>a[href="#"]{1차 메뉴 아이템 $}+ul>li*3>a[href="#"]{2차 메뉴 아이템 $}+ul>li*3>a[href="#"]{3차 메뉴 아이템 $}

 

CSS

/* 노말라이즈 시작 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

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

/* 커스텀 시작 */

.menu-box-1 {
  text-align:center;
}

.menu-box-1 ul {
  background-color:#afafaf;
}

.menu-box-1 > ul {
  display:inline-block;
  padding:0 20px;
  border-radius:10px;
}

.menu-box-1 ul > li {
  position:relative;
}

.menu-box-1 > ul > li {
  display:inline-block;
}

.menu-box-1 ul > li > a {
  display:block;
  padding:10px;
  font-weight:bold;
  white-space: nowrap;
}

.menu-box-1 ul > li:hover > a {
  background-color:black;
  color:white;
}

.menu-box-1 > ul ul {
  display:none;
  position:absolute;
  top:100%;
  left:0;
}

.menu-box-1 ul > li:hover > ul {
  display:block;
}

.menu-box-1 > ul ul ul {
  left:100%;
  top:0;
}
/* 커스텀 끝 */