<div class="codetitle"> <span><a style="CURSOR: pointer" data="15783" class="copybut" id="copybut15783" onclick="doCopy('code15783')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code15783"> <br><%@page pageEncoding="utf-8" <BR>contentType="text/html;charset=utf-8" %> <br><br><HTML> <br><HEAD> <br><title>WebForm5</title> <br><br><style>/* 루트 = 가로, 보조 = 세로 */ <br>ul#navmenu-h { <br>margin: 0; <br>경계: 0 없음; <br>패딩: 0; <br>너비: 500px; /*KHTML의 경우*/ <br>목록 스타일: 없음; <br>높이: 24px; <br>} <br><br>ul#navmenu-h li { <br>여백: 0; <br>경계: 0 없음; <br>패딩: 0; <br>플로트: 왼쪽; /*Gecko의 경우*/ <br>display: inline; <br>목록 스타일: 없음; <br>위치: 친척; <br>높이: 24px; <br>} <br><br>ul#navmenu-h ul { <br>여백: 0; <br>경계: 0 없음; <br>패딩: 0; <br>너비: 160px; <br>목록 스타일: 없음; <br>디스플레이: 없음; <br>위치: 절대; <br>상단: 24px; <br>왼쪽: 0; <br>} <br><br>ul#navmenu-h ul:after /*IE 7 규정 준수 부족*/{ <br>clear: 둘 다; <br>디스플레이: 블록; <br>글꼴: 1px/0px serif; <br>내용: "."; <br>높이: 0; <br>가시성: 숨김; <br>} <br><br>ul#navmenu-h ul li { <br>너비: 160px; <br>플로트: 왼쪽; /*IE 7 규정 미준수*/ <br>display: block !important; <br>디스플레이: 인라인; /*IE의 경우*/ <br>} <br><br>/* 루트 메뉴 */ <br>ul#navmenu-h a { <br>border: 1px solid #FFF; <br>테두리 오른쪽 색상: #CCC; <br>테두리 하단 색상: #CCC; <br>패딩: 0 6px; <br>float: 없음 !중요; /*오페라의 경우*/ <br>float: left; /*IE의 경우*/ <br>display: block; <br>배경: #EEE; <br>색상: #666; <br>글꼴: 굵은 10px/22px Verdana, Arial, Helvetica, sans-serif; <br>텍스트 장식: 없음; <br>높이: 자동 !중요; <br>높이: 1%; /*IE의 경우*/ <br>} <br><br>/* 루트 메뉴 호버 지속성 */ <br>ul#navmenu-h a:hover, <br>ul#navmenu-h li:hover a, <br>ul#navmenu-h li.iehover a { <br>배경: #CCC; <br>색상: #FFF; <br>} <br><br>/* 두 번째 메뉴 */ <br>ul#navmenu-h li:hover li a, <br>ul#navmenu-h li.iehover li a { <br>float: none ; <br>배경: #EEE; <br>색상: #666; <br>} <br><br>/* 2차 메뉴 호버 지속성 */ <br>ul#navmenu-h li:hover li a:hover, <br>ul#navmenu-h li:hover li:hover a, <br>ul#navmenu-h li.iehover li a:hover, <br>ul#navmenu-h li.iehover li.iehover a { <br>배경: #CCC; <br>색상: #FFF; <br>} <br><br>/* 3차 메뉴 */ <br>ul#navmenu-h li:hover li:hover li a, <br>ul#navmenu-h li.iehover li.iehover li a { <br>배경: #EEE; <br>색상: #666; <br>} <br><br>/* 3차 메뉴 호버 지속성 */ <br>ul#navmenu-h li:hover li:hover li a:hover, <br>ul#navmenu-h li:hover li: hover li:hover a, <br>ul#navmenu-h li.iehover li.iehover li a:hover, <br>ul#navmenu-h li.iehover li.iehover li.iehover a { <br>배경: # CCC; <br>색상: #FFF; <br>} <br><br>/* 4번째 메뉴 */ <br>ul#navmenu-h li:hover li:hover li:hover li a, <br>ul#navmenu-h li.iehover li.iehover li.iehover li a { <br>배경: #EEE; <br>색상: #666; <br>} <br><br>/* 4차 메뉴 Hover */ <br>ul#navmenu-h li:hover li:hover li:hover li a:hover, <br>ul#navmenu-h li.iehover li.iehover li.iehover li a:hover { <br>배경: #CCC; <br>색상: #FFF; <br>} <br><br>ul#navmenu-h ul ul, <br>ul#navmenu-h ul ul ul { <br>display: none; <br>위치: 절대; <br>상단: 0; <br>왼쪽: 160px; <br>} <br><br>/* 움직이지 마세요 - 앞에 와야 합니다. display:block for Gecko */ <br>ul#navmenu-h li:hover ul ul, <br>ul#navmenu-h li: hover ul ul ul, <br>ul#navmenu-h li.iehover ul ul, <br>ul#navmenu-h li.iehover ul ul ul { <br>디스플레이: 없음; <br>} <br><br>ul#navmenu-h li:hover ul, <br>ul#navmenu-h ul li:hover ul, <br>ul#navmenu-h ul ul li:hover ul, <br>ul#navmenu-h li.iehover ul, <br>ul#navmenu-h ul li.iehover ul, <br>ul#navmenu-h ul ul li.iehover ul { <br>display: block; <br>} <br><br></style><script 언어="javascript"> <br>navHover = function() { <br>var lis = document.getElementById("navmenu-h").getElementsByTagName("LI"); <br>for (var i=0; i<lis.length; i ) { <BR>lis[i].onmouseover=function() { <BR>this.className ="iehover"; <BR>} <BR>lis[i].onmouseout=function() { <BR>this.className=this.className.replace(new RegExp(" iehover\b"), <br><br>"") ; <BR>} <BR>} <BR>}<BR>if (window.attachEvent) window.attachEvent("onload", navHover); <BR></script> <br></HEAD> <br><본문> <br><ul id="navmenu-h"> <br><li><a href="#">루트 탐색 항목1</a> <br><ul> <br><li><a href="#">하위 탐색 항목1</a></li> <br><li><a href="#">하위 탐색 항목1-2</a></li> <br></ul> <br></li> <br><li><a href="#">루트 탐색 항목2</a> <br><ul> <br><li><a href="#">하위 탐색 항목2</a></li> <br><li><a href="#">하위 탐색 항목2-2</a></li> <br></ul> <br></li> <br><li><a href="#">루트 탐색 항목3</a> <br><ul> <br><li><a href="#">하위 탐색 항목3</a></li> <br><li><a href="#">하위 탐색 항목3-2</a></li> <br></ul> <br></li> <br></ul> <br></body> <br></html> <br> </div>