<style>
dl{width:150px;background:#00furl(bottom.gif)no-repeatleftbottom;color:#fff;padding-bottom:5px;}
dt{background:#00furl(top.gif)no-repeattopleft;padding:10px10px10px20px;font:14px/1.5emarial;border-bottom:1pxsolid#fff;}
dd{margin:0;border-bottom:1pxsolid#fff;}
a{display:block;background:url(arrow.gif)no-repeat10px10px;color:#fff;text-decoration:none;padding:5px0px5px20px;font:12px/1.5emarial;}
a:hover{color:#fcc;background:url(arrow.gif)no-repeat11px10px;}
</style>
<divid="menu">
<dlid="gallery">
<dt>ArtGallery</dt>
<dd><ahref="#"title="PaulCezanne">PaulCezanne</a></dd>
<dd><ahref="#"title="HenriMatisse">HenriMatisse</a></dd>
<dd><ahref="#"title="VincentvanGogh">VincentvanGogh</a></dd>
<dd><ahref="#"title="WilliamTurner">WilliamTurner</a></dd>
<dd><ahref="#"title="JohnConstable">JohnConstable</a></dd>
<dd><ahref="#"title="ClaudeMonet">ClaudeMonet</a></dd>
</dl>
</div>
效果演示
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;} Art Gallery Paul Cezanne Henri Matisse Vincent van Gogh William Turner John Constable Claude Monet
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
【一个不错的动感导航菜单】相关文章：
★ 两边静止的广告条