$$config title: [HTML/CSS] 2차 메뉴가 포함된 폴다운 메뉴바(= 중앙 둥근 메뉴바) 구현 keywords: - HTML - 폴다운메뉴바 $$ # 2차 메뉴가 포함된 중앙 둥근 메뉴바 (1차메뉴 3개, 2차메뉴 각 3개) 구현 단계 1. 1차 메뉴 마크업 2. 노말라이즈 3. 1차 메뉴 완성 4. 2차 메뉴 마크업 5. 2차 메뉴를 평소에 숨기기 6. 2차 메뉴를 유령화 7. 1차 메뉴 아이템을 유령의 집화 8. 2차 메뉴 아이템 텍스트도 꾸미기 9. 2차 메뉴에 배경색 10. 모든 메뉴에 배경색을 한방에 # 폴다운 메뉴바 구현 HTML 소스코드 ```html ``` # 폴다운 메뉴바 구현 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; position:relative; } /* 메뉴 아이템 텍스트 */ .menu-box-1 ul > li > a { padding:10px; display: block; font-weight:bold; } /* 호버된 메뉴 아이템의 텍스트 */ .menu-box-1 ul > li:hover > a { background-color:black; color:white; } /* 2차 메뉴 */ .menu-box-1 > ul > li > ul { position:absolute; display:none; /* 부모 안에 가둬진 상태에서 밑으로 100% 내리면 부모의 바닥 아래 생성 */ top:100%; left:0; } /* 호버된 1차 메뉴 아이템의 자식 메뉴 */ .menu-box-1 > ul > li:hover > ul { display:block; } ```

게시글 상세