$$config title: [HTML/CSS] 3차 메뉴가 포함된 폴다운 메뉴바 구현 keywords: - HTML - 폴다운메뉴바 $$ # 3차메뉴가 포함된 중앙 둥근 메뉴바 구현 작업 단계 1. 3차메뉴 마크업 (2차메뉴까지 만들어진 상태에서 시작 : [시작링크](https://codepen.io/jangka44/pen/GRMKbod)) 2. 3차메뉴 숨기기 3. 1차메뉴 아이템 뿐만 아니라, 모든 메뉴 아이템에 호버시 자식메뉴 나오도록 4. 1차메뉴 아이템 뿐만 아니라, 모든 메뉴 아이템을 relative처리하여, 모든 서브메뉴가 부모 아이템에 갇히도록 5. 3차메뉴는 2차메뉴 아이템의 우측부분에서 나오도록 6. 마지막 1차메뉴 아이템에 속한 3차메뉴는 좌측에 나오도록 ## 3차메뉴 포함 폴다운 메뉴바 HTML 소스코드 ```html ``` ## 3차메뉴 포함 폴다운 메뉴바 CSS 소스코드 ```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; } /* 1차 메뉴 */ .menu-box-1 > ul { display:inline-block; padding:0 20px; border-radius:10px; } /* 1차 메뉴 아이템 */ .menu-box-1 > ul > li { display:inline-block; } /* 모든 메뉴들은 각 부모에 갇히게 */ .menu-box-1 ul > li { position:relative; } /* 메뉴 아이템 텍스트 */ .menu-box-1 ul > li > a { padding:10px; display: block; font-weight:bold; white-space : nowrap; } /* 호버된 메뉴 아이템의 텍스트 */ .menu-box-1 ul > li:hover > a { background-color:black; color:white; } /* 2차, 3차,,, n차 (서브메뉴) */ .menu-box-1 > ul ul{ position:absolute; display:none; top: 100%; left: 0; } /* 3차메뉴 선택 */ .menu-box-1 > ul ul ul{ left : 100%; top : 0; } /* 1차메뉴의 마지막만 골라서 3차메뉴를 왼쪽으로 */ .menu-box-1 > ul > li:last-child > ul ul{ left : auto; right : 100%; } /* 호버된 1차 메뉴 아이템의 자손 (2차, 3차메뉴) 메뉴(ul) */ .menu-box-1 ul > li:hover > ul { display:block; } ``` $$codepen https://codepen.io/hoyeol0513/embed/abYzQXQ?default-tab=html%2Cresult $$