멋진 동적 탐색 메뉴_탐색 메뉴

<스타일>
dl{너비:150px;배경:#00f url(bottom.gif) 반복 없음 왼쪽 하단;색상:#fff;padding-bottom:5px;}

dt{배경:#00f url (top.gif) 반복 없음 왼쪽 상단;padding:10px 10px 10px 20px;font:14px/1.5em arial;border-bottom:1px solid #fff;}

dd{margin:0;border- 하단:1px 단색 #fff;}
a{display:block;Background:url(arrow.gif) no-repeat 10px 10px;color:#fff;text-꾸밈:none;padding:5px 0px 5px 20px;font :12px/1.5em arial;}
a:hover{color:#fcc;ground:url(arrow.gif) no-repeat 11px 10px;}

미술관

폴 세잔

앙리 마티스

빈센트 반 고흐

윌리엄 터너

John Constable

클로드 모네

效果演示

<style> dl{width:150px;background:#00f url(bottom.gif) no-repeat left bottom;color:#fff;padding-bottom:5px;} dt{background:#00f url(top.gif) no-repeat top left;padding:10px 10px 10px 20px;font:14px/1.5em arial;border-bottom:1px solid #fff;} dd{margin:0;border-bottom:1px solid #fff;} a{display:block;background:url(arrow.gif) no-repeat 10px 10px;color:#fff;text-decoration:none;padding:5px 0px 5px 20px;font:12px/1.5em arial;} a:hover{color:#fcc;background:url(arrow.gif) no-repeat 11px 10px;} </style> <div id="menu"> <dl id="gallery"> <dt>미술관</dt> <dd><a href="#" title="Paul Cezanne">폴 세잔</a></dd> <dd><a href="#" title="Henri Matisse">앙리 마티스</a></dd> <dd><a href="#" title="Vincent van Gogh">빈센트 반 고흐</a></dd> <dd><a href="#" title="William Turner">윌리엄 터너</a></dd> <dd><a href="#" title="John Constable">존 컨스터블</a></dd> <dd><a href="#" title="Claude Monet">클로드 모네</a></dd> </dl> </div>
[Ctrl A 전체选 注:如需引入외부Js需刷新才能执行]