카카오 증권 페이지 만들기 2

 

 

https://codepen.io/guenhyuck/pen/XWxrEox

/* 탑바 */
.top-bar {
  height: 72px;
  border-bottom: 1px solid #f4f4f4;
}

.top-bar > .con > .menu-box-1 > ul > li > a {
  font-weight: bold;
  color: #1e1e1e;
  font-size: 17px;
  padding: 0 15px;
  position: relative;
}

.top-bar > .con > .menu-box-1 > ul > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: black;
  left: 0;
  width: 0;
  transition: width 0.3s;
  height: 3px;
}

.top-bar > .con > .menu-box-1 > ul > li:hover > a::after {
  width: 100%;
}

/* 2차메뉴 */
.top-bar > .con > .menu-box-1 > ul > li {
  position: relative;
}

.top-bar > .con > .menu-box-1 > ul > li > ul {
  display: none;
  position: absolute;
  left: 12px;
  padding: 17px 0;
}

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

.top-bar > .con > .menu-box-1 > ul > li > ul > li > a {
  font-size: 17px;
  color: #666666;
  display: block;
  padding: 10px 0;
  white-space: nowrap;
  font-weight: bold;
}

.top-bar > .con > .menu-box-1 > ul > li > ul > li:hover > a {
  color: #1e1e1e;
}

이전에서 백그라운드 컬러를 지우고

2차 메뉴를 삽입,정렬하며 나오게끔까지 구현