메인메뉴와 하위 드롭메뉴 만들기

1. 메인메뉴 구조

- item__name : padding 10 20 34 20 / size 13px / Arial, sans-serif

- item hover : color #669900 / 배경 #2c2a29 / 상단좌우 보더 6px

 

2. 드롭다운 2줄 만들기

- contents__menu : 배경 #2c2a29 / 너비 220px / padding 20px 0

- contents__menu 제목 : padding 3px 0 12px 0 / #fff / size 14px

- contents__menu 리스트 : padding 5px 0 / #999(hover #669900) / size 12px / 마우스 포인터

- contents__texture :  padding 26px 0 / size 12px

- contents__texture h4 : #999 / 두께 700

- contents__texture p : #669900 / margin 4px 0 14px

 

---

 

1. 메인메뉴 구조 "depth메뉴"

헷갈리는 ul안에 ul안에 ul 도식화 정리

 

📍 class명 설명

item__name : 메뉴 카테고리명

item__contents : 하위 내용

  ㄴcontents__menu : 여러 개의 메뉴판 리스트 (가로 ul 안에 또 세로 ul)

  ㄴcontents__texture

 

📍 2deph 도식화

 

2. 드롭다운 만들기 

2-1. 드롭다운 item__name과 item__contents 배치하기 📌

2-2. 메뉴를 hover할 때만 하위 메뉴가 나오도록 display를 none/block으로 지정 📌

(설명)

item__name의 위치는 main-menu의 위치에 따라 정해진다.

main-menu는 header안에 있으므로 absolute position으로 right, bottom을 이용한다.

 

item__contents를 뷰포트 기준으로 너비를 설정하고 위치를 고정시킨다.

이때 top, bottom등 다른 위치는 사용하지 않고 left 속성만 사용하여 fixed한다.

header .main-menu {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: flex;
}
header .main-menu .item .item__name {
  padding: 10px 20px 34px 20px;
  font-family: Arial, sans-serif;
  font-size: 13px;
}
header .main-menu .item:hover .item__name {
  background-color: #2C2A29;
  color: #669900;
  border-radius: 6px 6px 0 0;
}
header .main-menu .item .item__contents {
  width: 100%;
  position: fixed;
  left: 0;
  display: none; /*평소에는 보이지 않게*/
}
header .main-menu .item:hover .item__contents {
  display: block; /*hover하면 보이게*/
}