모방 타오바오 홈페이지 분류 목록 효과 구현 코드_자바스크립트 기술

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>제목 없는 문서</title> <style type="text/css"> body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;} a{color:blue;} ul{margin:0;padding:0;list-style:none;} #navigation{height:26px;} #navigation li{float:left;} #navigation li.show .content{display:block;} #navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden} #navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;} #container{position:relative;width:800px;margin:50px;} #navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;} #navigation li .content ul li{margin-right:10px;float:none;display:inline;} #navigation li .content ul li a{border:none;} #navigation li .content ul li{width:120px;} #navigation li .content ul li h3{clear:both;text-align:left;} </style> <div id="container"> <ul id="navigation"> <li><span>병음색인</span></li> <li> <a href="#" class="index">아</a> <div class="content"> <h3>아리산</h3> <ul> <li><a href="#">아리산</a></li> <li><a href="#">아리산</a></li> <li><a href="#">아리산</a></li> <li><a href="#">아리산</a></li> <li><a href="#">아리산</a></li> <li><a href="#">아리산</a></li> </ul> <h3>아리산</h3> <ul> <li><a href="#">아리산</a></li> <li><a href="#">아리산</a></li> <li><a href="#">아리산</a></li> <li><a href="#">아리산</a></li> </ul> </div> </li> <li> <a href="#" class="index">ㄴ</a> <div class="content"> <h3>롤리팝</h3> <ul> <li><a href="#">롤리팝</a></li> <li><a href="#">롤리팝</a></li> <li><a href="#">롤리팝</a></li> <li><a href="#">롤리팝</a></li> <li><a href="#">롤리팝</a></li> <li><a href="#">롤리팝</a></li> </ul> <h3>롤리팝</h3> <ul> <li><a href="#">롤리팝</a></li> <li><a href="#">롤리팝</a></li> <li><a href="#">롤리팝</a></li> <li><a href="#">롤리팝</a></li> </ul> </div> </li> <li> <a href="#" class="index">ㄷ</a><div class="content">ㄷ</div> </li> <li> <a href="#" class="index">ㄷ</a><div class="content">ㄷ</div> </li> <li> <a href="#" class="index">이</a><div class="content">이</div> </li> <li> <a href="#" class="index">F</a><div class="content">F</div> </li> <li> <a href="#" class="index">지</a><div class="content">지</div> </li> <li> <a href="#" class="index">ㅎ</a><div class="content">ㅎ</div> </li> <li> <a href="#" class="index">나</a><div class="content">나</div> </li> <li> <a href="#" class="index">제</a><div class="content">제</div> </li> <li> <a href="#" class="index">ㅋ</a><div class="content">ㅋ</div> </li> <li> <a href="#" class="index">엘</a><div class="content">엘</div> </li> <li> <a href="#" class="index">엠</a><div class="content">엠</div> </li> <li> <a href="#" class="index">ㄴ</a><div class="content">ㄴ</div> </li> <li> <a href="#" class="index">오</a><div class="content">오</div> </li> <li> <a href="#" class="index">피</a><div class="content">피</div> </li> <li> <a href="#" class="index">Q</a><div class="content">Q</div> </li> <li> <a href="#" class="index">르</a><div class="content">르</div> </li> <li> <a href="#" class="index">쉬[sh]</a><div class="content">쉬</div> </li> <li> <a href="#" class="index">ㅋ</a><div class="content">ㅋ</div> </li> <li> <a href="#" class="index">유</a><div class="content">유</div> </li> <li> <a href="#" class="index">뷔</a><div class="content">뷔</div> </li> <li> <a href="#" class="index">W</a><div class="content">W</div> </li> <li> <a href="#" class="index">엑스</a><div class="content">엑스</div> </li> <li> <a href="#" class="index">ㅇ</a><div class="content">ㅇ</div> </li> <li> <a href="#" class="index">Z[zh]</a><div class="content">Z</div> </li> </ul> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]