아웃백 헤더

 

세로 메뉴 depth2까지

누르면 hover 뜨면서 세부 카테고리 나옴

 

 

 

 

 

 

css 코드

/* 컬러 변수 */

:root {

  --point-color1: #c30606;

  --point-color2: #907354;

  --txt-color-400: #999;

  --txt-color-500: #666;

  --txt-color-600: #222;

}

#wrap {

  height: 1500px;

  min-width: 1260px;

}

 

#header {

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  z-index: 9999;

  min-width: 1260px;

  background: rgba(52, 52, 54, 1);

}

#header .inner {

  width: 1180px;

  height: 100px;

  display: flex;

  align-items: center;

  margin: 0 auto;

}

#header .gnb_wrap {

  margin-left: 80px;

}

#header .gnb {

  display: flex;

}

#header .gnb>li {

  padding: 0 15px;

  position: relative;

}

#header .gnb>li>a {

  display: block;

  line-height: 100px;

  font-size: 19px;

  color: #fff;

  font-family: 'Akrobat', sans-serif;

  letter-spacing: 0.12em;

  position: relative;

}

#header .gnb>li>a::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 30px;

  background: var(--point-color1);

  width: 100%;

  height: 3px;

  display: none;

}

#header .gnb>li:hover>a::after {

  display: block;

}

#header .gnb>li:hover .depth2 {

  opacity: 1;

  visibility: 1;

  transition: all 0.5s;

}

#header .gnb .depth2 {

  white-space: nowrap;

  position: absolute;

  left: 0;

  top: 100px;

  padding: 28px 30px;

  background: rgba(0, 0, 0, 0.6);

  opacity: 0;

  visibility: 0;

}

#header .gnb .depth2 li + li {

  margin-top: 15px;

}

#header .gnb .depth2 a {

  color: #fff;

}

#header .login {

  margin-left: auto;

  display: flex;

  gap: 0 20px;

}

#header .login a {

  display: block;

  line-height: 30px;

  color: var(--txt-color-400);

  font-size: 13px;

}

#header .login .join a {

  width: 88px;

  text-align: center;

  background: #555;

  color: #fff;

}

#container {

  padding-top: 100px;

}

.main_slider {

  overflow: hidden;

  height: 900px;

  position: relative;

}

.main_slider a {

  position: absolute;

  left: 50%;

  top: 0;

  transform: translateX(-50%);

}

.main_slider img {  

  max-width: none;

}