라디오버튼과 체크박스를 커스텀 체크박스로 스타일링 관련 질문 드립니다.

감사합니다.

'기본형 드롭다운 네비게이션'이 zip 화일 안에 없습니다.

찾아서 확인했습니다.감사합니다.

세로 슬라이드에서 font-size: 0이 적용되지 않습니다.

감사합니다.

.menu에 display: flex를 적용했을 때 sub-menu가 한꺼번에 보입니다

소스를 부분만 올려서 죄송합니다. 네비게이션-상단-03-개별(완성)입니다. HTML은 바뀐 부분이 없고 CSS는 위에 올린 부분만 변경했습니다. header 부분에 float를 적용하거나 display:flex를 적용해도 동일한 문제가 나타납니다. 네비게이션-상단-03-개별(완성) 로고 MENU-1 SUBMENU-1 SUBMENU-2 SUBMENU-3 SUBMENU-4 MENU-2 SUBMENU-1 SUBMENU-2 SUBMENU-3 SUBMENU-4 MENU-3 SUBMENU-1 SUBMENU-2 SUBMENU-3 SUBMENU-4 MENU-4 SUBMENU-1 SUBMENU-2 SUBMENU-3 SUBMENU-4 이미지 슬라이드 공지사항(C.1) 갤러리(C.2) 바로가기(C.3) Copyright SNS 패밀리 사이트 @charset "utf-8"; body { margin: 0; font-size: 15px; color: #222; line-height: 1.6em; background-color: #fff; } a { text-decoration: none; color: #222; } .container {} /* Header */ .header-inner { background-color: #eee; } header { border: 1px solid #ccc; width: 1200px; margin: auto; height: 100px; /* flex */ display: flex; justify-content: space-between; /* flex */ } header div { height: 100px; border: 1px solid #ccc; } .header-logo { width: 200px; /* header에 display : flex 적용 */ /* float: left; */ text-align: center; line-height: 100px; } .navi { width: 600px; /* header에 display : flex 적용 */ /* float: right; */ } /* Content */ .content-inner { width: 1200px; margin: auto; } .slide { width: 1200px; height: 300px; text-align: center; line-height: 300px; } .slide div { border: 1px solid #ccc; height: 300px; } .items { overflow: hidden; } .items > div { border: 1px solid #ccc; height: 200px; float: left; box-sizing: border-box; } .news { width: 500px; text-align: center; line-height: 200px; } .banner { width: 350px; text-align: center; line-height: 200px; } .shortcut { width: 350px; text-align: center; line-height: 200px; } /* Footer */ .footer-inner { background-color: #eee; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid #ccc; height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 1000px; text-align: center; line-height: 100px; } .footer-content { width: 200px; text-align: center; line-height: 100px; } .footer-content div { border: 1px solid #ccc; height: 50px; text-align: center; line-height: 50px; } /* Navigation */ .menu { padding: 0; margin-top: 30px; list-style: none; display: flex; } .menu li { /* float: left; */ width: 25%; text-align: center; border: 1px solid #000; box-sizing: border-box; background-color: #fff; } .menu li > a { display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { height: 135px; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background-color: #000; color: #fff; }