드롭-다운 메뉴 효과 CSS로 구현

<!-머리 영역에 다음 코드를 추가->
< 스타일 형식을 "Text/css" = >

#cssdropdown, #cssdropdown ul
패딩: 0;
여백: 0;
목록-스타일: 없음;
}

#cssdropdown 리 없음
플 로트: 왼쪽;
위치: 상대;
}

. mainitems 없음;
국경: 1PX 고체 검정;
배경-색상: #FFEEC6;
}

. Mainitems는 없음
여백-왼쪽: 6px;
여백-오른쪽: 8px;
텍스트-장식: 없음;
}

. subuls 없음;
표시: 없음;
폭: 10em;
위치: 절대;
상단: 1.2em;
왼쪽: 0;
배경-색상: 밝은 노란색;
국경: 1PX 고체 검정;
}

. Subuls 리 없음
폭: 100%;
}

. subuls Li A 없음
텍스트-장식: 밑줄;
}

#cssdropdown Li > ul {/ * 재정의 브라우저, IE, 위치 거 야 보다는 하단 왼쪽 보다는 오히려 포함 하 리, * * *
탑: 자동;
왼쪽: 자동;
}

#cssdropdown Li:hover ul, ul Li.over {/ * 목록 아래에 중첩 된 목록 항목 * *
디스플레이: 블록;
}

#restofcontent {/ * 안쪽이 div * 페이지의 콘텐츠의 나머지 포장 /
지우기: 왼쪽;
}

</스타일 >

< 스크립트 유형 = "텍스트/자바 스크립트" ><!-/ /--> <! [cdata [/ / ><!-
스타트 리스트 기능 () 없음 =
경우 (Document.all & & document.getelementbyid) 없음
Cssdropdownroot = document.getElementById ("Cssdropdown");
대 한 (나 = 0 나 < cssdropdownroot.childnodes.length; i + +) 없음
노드 = cssdropdownroot.childnodes[i];
경우 (node.nodename== "LI") 없음
Node.onmouseover=function () 없음
"이상"; this.classname+=
}
Node.onmouseout=function () 없음
This.classname=this.classname.replace ("이상", "");
}
}
}
}
}

경우 (window.attachevent)
Window.attachevent ("onload", 스타트 리스트)
다른
Window.onload=startlist;

-> <!]] >< / 스크립트 >

<!-본문 영역에 다음 코드를 추가->
< ul id = "Cssdropdown" >

< 리 클래스 = "Mainitems" >
<는 href = "http://www.jzread.com" > css 갤러리 < /a >
< ul 클래스 = "Subuls" >
< li ><는 href = "http://www.jzread.com" > 고 든 맥 < /a >< /li >
< li ><는 href = "http://www.jzread.com" > 생각 < /a >< /li > 고용
< li ><는 href = "http://www.jzread.com" > < /a >< /li > 매일 비행
< li ><는 href = "http://www.jzread.com" > < /a >< /li > 자 몽
< /ul >
< /li >

< 리 클래스 = "Mainitems" >
<는 href = "http://www.jzread.com" > css 예제 < /a >
< ul 클래스 = "Subuls" 스타일 "폭: 15em" = >
< li ><는 href = "http://www.jzread.com" > css2 생성 콘텐츠 < /a >< /li >
< li ><는 href = "http://www.jzread.com" > 사용자 지정 스크롤 막대 색상 < /a >< /li >
< li ><는 href = "http://www.jzread.com" > markerless 목록과 "들여쓰기" < /a >< /li >
< /ul >
< /li >

< /ul >