한국어
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/
로 만든 웹 페이지 드롭다운 메뉴
DTD/xhtml11.dtd " [ <!ELEMENT a (#PCDATA | 테이블)* > ]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head > <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>IE 및 FF와 호환되는 순수 CSS 드롭다운 메뉴</title> <style type="text/css"> body {color:#fff;} #wrapper {color:#000;} .red {color:#c00;} #info {margin-top:20px;} #info h1 {font- 크기:3em; 텍스트 정렬: 센터; 글꼴 계열: 조지아, "times new roman", serif;} #head {height:145px; border:0;} #positioner {clear:both position:relative; 1px; z-index:100; } #ads {position:relative; z-index:10;} .menu {display:none;} #noniemenu {position:absolute;} #noniemenu ul {padding:0; :0;} #noniemenu .holder ul li {목록 스타일 유형: 없음;} #noniemenu .holder li {} #noniemenu .holder li ul {display: none;} #noniemenu .holder li:hover > ul#a3 {디스플레이:블록; 위치:절대; 왼쪽:105px; 여백-상단:-20px; 테두리:1px 솔리드 #000;} #noniemenu .holder .bold {font-weight:bold;} #noniemenu .holder { 색상:# fff; 너비:104px; 높이: 18px; 플로트:왼쪽; 여백-오른쪽:10px; :auto; } #noniemenu a.outer:visited { color:#fff; line-height:18px; text-align:center; 장식:없음; 글꼴 계열: verdana, arial, sans-serif; } #noniemenu a.outer:hover { 배경:#697210; 오버플로:visible } #noniemenu div.open {display:none;} #noniemenu 내부, #noniemenu a.inner: 방문함: 블록; 너비: 104px; 선 높이: 18px; 테두리-하단: 1px 텍스트 장식:없음 배경: #eee; text-align:center ; } #noniemenu a.second {font-weight:bold;} #noniemenu a.inner:hover { background:#add } </style> <!--[IE 6 ]> <style type="text /css"> body {margin-top:-8px;} #head {height:147px;} #noniemenu {display:none;} .menu {display:block; position:absolute;} .menu a.outer:visited { 색상:#fff; 높이:18px; 배경:#e09222; 여백-오른쪽:1px -align:center; float:left ; 텍스트-장식: verdana, sans-serif; line-height:18px } .menu a.outer: hover { 배경:#697210; 오버플로:visible; } .menu a.outer:hover table.first { 디스플레이:블록; border-collapse:collapse } .menu a.inner :visited { 디스플레이:블록; 높이:18px; 텍스트 장식:없음; 글꼴 계열: verdana, arial, 글꼴 크기 :10px; text-align:center ; } .menu a.inner:hover { background:#add; } .menu a.outer table.first a.second { 높이:18px; 오버플로:숨김; 글꼴 무게:굵게; } .메뉴 a.outer table.first a.second:hover { 위치:상대적; 오버플로:visible; } .menu a.outer table.first a.second:hover 테이블 { 위치:절대 상단; :-2px; 왼쪽:102px; 테두리:#eee; 테두리:1px 글꼴-가중치:일반 } </style> <!--[if lte IE 6]> <style> #ads {display:none;} #adsie {clear:both; text-align:center; margin-top:10px;} </style> <![endif]- -> </head> <body > <div id="wrapper"> <div id="head"> <div id="positioner"> <div class="menu"> <a class="outer" href= "../menu/index.html">DEMOS <table class="first"><tr><td> <a class="inner" href="../menu/zero_dollars.html" title="제로 달러 광고 페이지">0달러</a> <a class="inner" href="../menu/embed.html" title="이미지 주위에 텍스트 배치">텍스트 배치</a> <a class=" inner" href="../ menu/form.html" title="양식 스타일 지정">스타일이 지정된 양식</a> <a class="inner" href="../menu/nodots.html" title="제거 중 active/focus borders">활성 포커스 </a> <a class="inner second" href="../menu/hover_click.html" title="활성/포커스 테두리가 없는 호버/클릭">호버/클릭 > <table><tr><td > <a class="inner" href="../menu/form.html" title="양식 양식">스타일 양식</a> <a class="inner" href= "../menu/nodots.html" title="활성/초점 테두리 제거">활성 초점</a> <a class="inner" href="../menu/hover_click.html" title="Hover/ 활성/초점 테두리 없이 클릭" >호버/클릭</a> </td></tr></table> </a> <a class="inner" href="../menu/shadow_boxing.html " title="다중 위치 드롭 섀도우">섀도우 복싱</a> <a class="inner" href="../menu/old_master.html" title="자세한 정보는 이미지 맵">이미지 맵</ a> <a class="inner " href="../menu/bodies.html" title="배경 이미지로 즐거운 시간">재미있는 배경</a> <a class="inner" href="../menu /fade_scroll.html" title=" 페이드아웃 스크롤">페이드 스크롤</a> <a class="inner" href="../menu/em_images.html" title="em 크기 이미지 비교">em 크기 이미지</a> </td ></tr></table> </a> <a class="outer" href="index.html">메뉴 <table class="first"><tr><td > <a class="inner" href="spies.html" title="코드화된 스파이 목록">스파이 메뉴</a> <a class="inner" href="vertical.html" title="가로 수직 메뉴">수직 메뉴</ a> <a class="inner" href="expand.html" title="an enlargeing unordered list">확대 목록</a> <a class="inner" href="enlarge .html" title="링크 이미지가 포함된 순서 없는 목록">링크 이미지</a> <a class="inner" href="cross.html" title="비직사각형 링크">비직사각형</a> <a class="inner" href ="jigsaw.html" title="jigsawlinks">퍼즐 링크</a> <a class="inner" href="circles.html" title="circularlinks">순환 링크 </a> </td> </tr></table> </a> <a class="outer" href="../layouts/index.html">레이아웃 <table class="first">< tr><td> <a class ="inner" href="../layouts/bodyfix.html" title="크로스 브라우저 고정 레이아웃">고정 1</a> <a class="inner" href=". ./layouts/body2.html" title="크로스 브라우저 고정 레이아웃">고정 2</a> <a class="inner" href="../layouts/body4.html" title="크로스 브라우저 고정 레이아웃" >고정 3</a> < a class="inner" href="../layouts/body5.html" title="크로스 브라우저 고정 레이아웃">고정 4</a> <a class="inner" href= "../layouts/minimum.html" title="간단한 최소 너비 레이아웃">최소 너비</a> </td></tr></table> </a> <a class="outer" href ="../boxes/index .html">상자 <table class="first"><tr><td> <a class="inner" href="../boxes/scrollbars.html" title="왼쪽 스크롤 막대">왼쪽 스크롤</a> <a class="inner" href="../boxes/floatfix.html" title="IE6 3px float 수정">IE6 3px 수정</a> <a class=" inner" href="../ 상자/snazzy.html" title="멋진 테두리">멋진 테두리</a> <a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a> <a class="inner" href="../boxes/outside.html" title="백분율 PLUS 픽셀">% PLUS 픽셀</a> <a class="inner" href="../boxes/ minwidth.html" title="IE의 최소 너비">IE 최소 너비</a> <a class="inner" href="../boxes/minheight.html" title ="IE의 최소 높이" >IE 최소 높이</a> </td></tr></table> </a> <a class="outer" href="../mozilla/index.html html">MOZILLA <table class= "first"><tr><td> <a class="inner" href="../mozilla/dropdown.html" title="드롭다운 메뉴">드롭다운 메뉴< /a> <a class="inner" href="../mozilla/cascade.html" title="계단식 메뉴">계단식 메뉴</a> <a class="inner" href="../mozilla /content.html" title=" content 사용:">content:</a> <a class="inner" href="../mozilla/moxbox.html" title=":div에 호버 적용">mozzie box</a> <a class ="inner" href="../mozilla/rainbow.html" title="나는 무지개를 만들 수 있어요">무지개 상자</a> <a class="inner" href=" ../mozilla/snooker.html " title="스누커 큐">스누커 큐</a> <a class="inner" href="../mozilla/target.html" title="Target Practise">표적 연습 </a> <a class= "inner" href="../mozilla/splittext.html" title="2개의 톤 제목">2개의 톤 제목</a> <a class="inner" href=".. /mozilla/shadow_text.html" title ="그림자 텍스트">그림자 텍스트</a> </td></tr></table> </a> <a class="outer" href="../ie /index.html">탐색기 < table class="first"><tr><td> <a class="inner" href="../ie/exampleone.html" title="예제 1">예제 1< /a> <a class="inner" href="../ie/weft.html" title="위사 글꼴">위사 글꼴</a> <a class="inner" href="../ie/ exampletwo.html" title="세로 정렬">세로 정렬</a> </td></tr></table> </a> <a class="outer" href="../opacty/index. html">OPACITY <table class= "first"><tr><td> <a class="inner" href="../opacty/colours.html" title="컬러 휠">불투명 색상</a> <a class="inner" href ="../opacty/picturemenu.html" title="불투명도를 사용하는 메뉴">불투명 메뉴</a> <a class="inner" href="../opacty/png .html" title="부분 불투명도 ">부분 불투명도</a> <a class="inner" href="../opacty/png2.html" title="부분 불투명도 II">부분 불투명도 II</a> </td></tr> </table> </a> </div> <div id="noniemenu"> <div class="holder"> <ul> <li><a class="outer" href ="../menu/index .html">데모스</a></li> <li><a class="inner" href="../menu/zero_dollars.html" title="0달러 광고 page">0달러</a ></li> <li><a class="inner" href="../menu/embed.html" title="이미지 주위에 텍스트 감싸기">텍스트 감싸기</a> </li> <li>< a class="inner" href="../menu/form.html" title="스타일 지정 양식">스타일이 지정된 양식</a></li> <li><a class= "inner" href=".. /menu/nodots.html" title="활성/초점 테두리 제거">활성 초점</a></li> <li><a class="inner second" href=". ./menu/hover_click.html" title="활성/초점 테두리가 없는 호버/클릭">호버/클릭 ></a> <ul id="a3"> <li><a class="inner" href= "../menu/form.html" title="양식 양식">스타일이 지정된 양식</a></li> <li><a class="inner" href="../menu/nodots.html" title ="활성/포커스 테두리 제거" >활성 포커스</a></li> <li><a class="inner" href="../menu/hover_click.html" title="활성 포커스가 없는 상태에서 마우스 오버/클릭 /focus borders">호버/클릭 </a></li> </ul> </li> <li><a class="inner" href="../menu/shadow_boxing.html" title="다중 -위치 드롭 섀도우">섀도우 복싱 </a></li> <li><a class="inner" href="../menu/old_master.html" title="자세한 정보는 이미지 맵">이미지 맵 </a></li> <li><a class="inner" href="../menu/bodies.html" title="배경 이미지가 있는 재미">재미있는 배경</a></li> < li><a class="inner " href="../menu/fade_scroll.html" title="페이드아웃 스크롤">페이드 스크롤</a></li> <li><a class="inner" href="../menu/ em_images.html" title="em 크기 이미지 비교">em 크기 이미지</a></li> </ul> </div> <div class="holder"> <ul > <li><a class= "outer" href="index.html">메뉴</a></li> <li><a class="inner" href="spies.html" title="a 코딩됨 list of spies">스파이 메뉴</a></li> <li><a class="inner" href="vertical.html" title="a 수평 수직 메뉴">수직 메뉴</a></li > <li><a class= "inner" href="expand.html" title="an enlargeing unordered list">목록 확대</a></li> <li><a class="inner" href=" 확대.html" title="링크 이미지가 포함된 순서 없는 목록">링크 이미지</a></li> <li><a class="inner" href="cross.html" title="비직사각형 링크" >비직사각형</a> </li> <li><a class="inner" href="jigsaw.html" title="jigsawlinks">직소 링크</a></li> <li>< a class="inner" href= "circles.html" title="원형 링크">원형 링크</a></li> </ul> </div> <div class="holder"> <ul> < li><a class="outer " href="../layouts/index.html">레이아웃</a></li> <li><a class="inner" href="../layouts/bodyfix .html" title="크로스 브라우저 고정 레이아웃">고정 1</a></li> <li><a class="inner" href="../layouts/body2.html" title="크로스 브라우저 고정 레이아웃">고정 2</a ></li> <li><a class="inner" href="../layouts/body4.html" title="크로스 브라우저 고정 레이아웃">고정 3</a> </li> <li>< a class="inner" href="../layouts/body5.html" title="크로스 브라우저 고정 레이아웃">고정 4</a></li> <li><a class="inner" href=" ../layouts/minimum.html" title="간단한 최소 너비 레이아웃">최소 너비</a></li> </ul> </div> <div class=" 홀더"> <ul> <li ><a class="outer" href="../boxes/index.html">상자</a></li> <li><a class="inner" href= "../boxes/scrollbars.html" title="왼쪽 스크롤 막대">왼쪽 스크롤</a></li> <li><a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix" >IE6 3px fix</a></li> <li><a class="inner" href="../boxes/snazzy.html" title="Snazzy borders">snazzy 테두리</a></li > <li><a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy Korners</a></li> <li ><a class="inner" href="../boxes/outside.html" title="백분율 PLUS 픽셀">% PLUS 픽셀</a></li> <li><a class="inner" href ="../boxes/minwidth .html" title="IE의 최소 너비">IE 최소 너비</a></li> <li><a class="inner" href="../boxes /minheight.html" title=" IE의 최소 높이">IE 최소 높이</a></li> </ul> </div> <div class="holder"> <ul> <li>< a class="outer" href= "../mozilla/index.html">MOZILLA</a></li> <li><a class="inner" href="../mozilla/dropdown.html" title="드롭다운 메뉴" >드롭다운 메뉴</a></li> <li><a class="inner" href="../mozilla/cascade.html" title="계단식 메뉴"> 계단식 메뉴</a></ li> <li><a class="inner" href="../mozilla/content.html" title="콘텐츠 사용:">콘텐츠:</a></li> <li><a class=" inner" href="../mozilla/moxbox.html" title=":div에 마우스오버 적용">모지 상자</a></li> <li><a class= "inner" href=".. /mozilla/rainbow.html" title="나는 무지개">무지개 상자를 만들 수 있어요</a></li> <li><a class="inner" href=".. /mozilla/snooker.html" title ="스누커 큐">스누커 큐</a></li> <li><a class="inner" href="../mozilla/target.html" title="대상 Practise">목표 연습</a ></li> <li><a class="inner" href="../mozilla/splittext.html" title="두 가지 톤 제목">두 가지 톤 제목</a> </li> <li>< a class="inner" href="../mozilla/shadow_text.html" title="그림자 텍스트">그림자 텍스트</a></li> </ul> </div > <div class="holder" > <ul> <li><a class="outer" href="../ie/index.html">탐색기</a></li> <li><a 클래스 ="inner" href=". ./ie/exampleone.html" title="예제 1">예제 1</a></li> <li><a class="inner" href="../ie /weft.html" title=" 위사 글꼴">위사 글꼴</a></li> <li><a class="inner" href="../ie/exampletwo.html" title="수직 정렬" >수직 정렬</a>< /li> </ul> </div> <div class="holder"> <ul> <li><a class="outer" href="../opacty/index. html">투명성</a> </li> <li><a class="inner" href="../opacty/colours.html" title="컬러 휠">불투명 색상</a></li > <li><a class= "inner" href="../opacty/picturemenu.html" title="불투명도를 사용한 메뉴">불투명 메뉴</a></li> <li><a class=" inner" href="../ opacty/png.html" title="부분 불투명">부분 불투명</a></li> <li><a class="inner" href="../opacty/png2 .html" title="부분 불투명도 II">부분 불투명도 II</a></li> </ul> </div> </div> </div> </div> <!-- 머리 끝 - -> <div id="info "> <h2>드롭다운 재미</h2> <h1>JAVASCRIPT 없음</h1> <h1>CSS만!!!</h1> <h1 class="red">지금 CASCADE 사용</h1> </h1> div> </div> </body> </html>
