자바 스크립트를, CSS를, 튜토리얼, 에이스 Infoway 인도의 블로그를 사용하지 않고 순수 CSS를 드롭 다운 메뉴 |

순수한 자바 스크립트를 사용하지 않고 메뉴를 드롭 다운 CSS를

이것은 자바 스크립트를 사용하지 않고 다운 메뉴 순수 CSS를 버려라를 만드는 방법에 대한 튜토리얼입니다. 나는 사람들이 종종 이런 효과를 달성하기 위해 JavaScript를 사용하는, 그러나 나타났습니다. 사실, 단지 CSS로 그것을 할 수있는 간단한 방법이 있습니다.

여기서는 예제

첫 번째 단계 : 우리는 기본 HTML 구조를 만들 수 있습니다.


  > <사업부는 "아이디 ="헤더>을
 <h1> 개발자 파라다이스 데모 </ h1>
 > <UL 인증 자료 ID = "메뉴">
 <li> <span>에 홈 </ 스팬 정보>
 <ul>
 > Menu item 1 </a> </li> <li> < href가 = "#"> 메뉴 항목을 하나 </> </ 리>
 > Menu item 2 </a> </li> <li> < href가 = "#"> 메뉴 항목이 </> </ 리>
 > Menu item 3 </a> </li> <li> < href가 = "#"> 메뉴 항목 3 </> </ 리>
 </ UL 인증>
 </ 리>
 <li> <span>에이 >를 소개 </ 스팬의
 <ul>
 > Menu item 1 </a> </li> <li> < href가 = "#"> 메뉴 항목을 하나 </> </ 리>
 > Menu item 2 </a> </li> <li> < href가 = "#"> 메뉴 항목이 </> </ 리>
 > Menu item 3 </a> </li> <li> < href가 = "#"> 메뉴 항목 3 </> </ 리>
 </ UL 인증>
 </ 리>
 <li> <span>에 제품 </ 스팬 정보>
 <ul>
 > Menu item 1 </a> </li> <li> < href가 = "#"> 메뉴 항목을 하나 </> </ 리>
 > Menu item 2 </a> </li> <li> < href가 = "#"> 메뉴 항목이 </> </ 리>
 > Menu item 3 </a> </li> <li> < href가 = "#"> 메뉴 항목 3 </> </ 리>
 </ UL 인증>
 </ 리>
 </ UL 인증>
 </ 사업부의>

두 번째 단계 : 이제 우리는 마법 CSS는 코드를 작성


  ; padding : 0 ; } * {마진 : 0; 패딩 : 0;}

 본문 {
 ; 배경 : # 222;
 Arial, Helvetica, sans-serif ; 글꼴 : 100 % 정상 굴림, Helvetica, SAN을 - 리프;
 }

 : #fff ; } h1 {색깔 : # fff;}

 # 헤더 {
 ; 높이 : 120px; 위치 : 상대적;
 ; 배경 : # 333;
 }

 # 메뉴에서 {
 여백 : 0px;
 패딩 : 0px;
 위치 : 절대;
 ; 맨 위로 : 70px;
 디스플레이 : 블록;
 }

 # 메뉴> 리 {
 리스트 스타일 타입 : 없음;
 플로트 : 왼쪽;
 디스플레이 : 블록;
 ; 여백 : 0px 10px;
 위치 : 상대;
 패딩 : 10px;
 폭 : 100px;
 }

 ul { # 메뉴> 리 : 가져가기 UL 인증 {
 디스플레이 : 블록;
 }

 { # 메뉴> 리 : 가져가 {
 ; 배경 색 : # 808080;
 - moz - 국경 - 반경 : 10px;
 - 웹킷 - 국경 - 반경 : 10px;
 }

 # 메뉴는 리튬 UL 인증 {
 여백 : 0px;
 패딩 : 0px;
 표시 : 없음;
 }
 # 메뉴는 리튬 UL 인증 리 {
 리스트 스타일 타입 : 없음;
 ; 마진 : 10px 0 0 0;
 글꼴 크기 : 11px;
 }

 # 메뉴는 리튬 UL 인증 리 {
 디스플레이 : 블록;
 ; 패딩 : 5px 10px;
 ; 색상 : # fff;
 텍스트 장식 : 없음;
 글꼴 - 무게 : 굵게;
 }

 a { # 메뉴는 리튬 UL 인증 리 : 하버 {
 ; 배경 색 : # 606060;
 - moz - 국경 - 반경 : 5px;
 - 웹킷 - 국경 - 반경 : 5px;
 }

 # 메뉴 리튬 스팬 {
 커서 : 포인터;
 ; 여백 : 0px 10px;
 글꼴 - 무게 : 굵게;
 ; font-size : 11px ; 색상 : # fff; 글꼴 크기 : 11px;
 }