효과 시연: 예제 코드: 코드 복사 코드는 다음과 같습니다. <머리> <제목>데모 <br><!-- <BR>body { <BR>글꼴 계열: Arial, Helvetica, sans-serif; <BR>글꼴 크기: 11px; <BR>} <BR>#nav, #nav ul { <BR>목록 스타일: 없음; <BR>배경: #F9F9F9; <BR>글꼴 두께: 굵게; <BR>패딩: 0px; <BR>여백: 0px; <BR>테두리: 단색 1px #CCCCCC; <BR>테두리 하단: 0px; <BR>너비: 150px; <BR>텍스트 정렬: 왼쪽; <BR>} <BR>#nav ul ul{ <BR>테두리: 단색 1px #CCCCCC; <BR>테두리 하단: 0px; <BR>} <BR>#nav a { <BR>디스플레이: 블록; <BR>너비: 150px; <BR>너비: 140px; <BR>색상: #333333; <BR>텍스트 장식: 없음; <BR>텍스트 정렬: 가운데; <BR>테두리 하단: 단색 1px #CCCCCC; <BR>텍스트 정렬: 왼쪽; <BR>왼쪽 여백: 10px; <BR>} <BR>#nav a:hover{ <BR>색상: #336666; <BR>} <BR>#nav a.selected{ <BR> background: url(http://bbs.blueidea.com/images/common/bb_expand.gif) no-repeat right 50%; <BR>} <BR>#nav li { <BR>줄 높이: 22px; <BR>위치: 친척; <BR>} <BR>#nav li ul { <BR>위치: 절대; <BR>왼쪽: -999em; <BR>너비: 150px; <BR>글꼴 두께: 보통; <BR>여백: 0px; <BR>패딩: 0px; <BR>} <BR>#nav li li { <BR>너비: 150px; <BR>} <BR>#nav li ul a { <BR>너비: 150px; <BR>너비: 126px; <BR>패딩: 0px 12px; <BR>줄 높이: 22px; <BR>텍스트 정렬: 왼쪽; <BR>} <BR>#nav li ul ul { <BR>여백: 0px 0 0 150px; <BR>} <BR>#nav li:hover ul ul,#nav li.sfhover ul ul{ <BR>왼쪽: -999em; <BR>} <BR>#nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{ <BR>왼쪽: auto; <BR>} <BR>#nav li:hover ul,#nav li.sfhover ul{ <BR>왼쪽: 150px; <BR>상단: 0px; <BR>} <BR>#nav li:hover, #nav li.sfhover { <BR>배경: #F5E3C0; <BR>} <BR>* html #nav li { <BR>float: 왼쪽; <BR>높이: 1%; <BR>} <BR>* html #nav li a { <BR>높이: 1%; <BR>} <BR>--> <br> <본문> 뒤로 홈 내 소개 자습서 하위 메뉴 31 하위 메뉴 32 하위 메뉴 321 하위 메뉴 322 하위 메뉴 323 하위 메뉴 324 하위 메뉴 33> 하위 메뉴 34> 갤러리 하위 메뉴 41> 하위 메뉴 42 하위 메뉴 421 하위 메뉴 422 하위 메뉴 423> 하위 메뉴 424 하위 메뉴 43> 하위 메뉴 44> 연락처
