当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 一个不错的动感导航菜单

一个不错的动感导航菜单

2019年08月01日  | 移动技术网IT编程  | 我要评论
<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>art gallery</dt>
<dd><a href="#" title="paul cezanne">paul cezanne</a></dd>
<dd><a href="#" title="henri matisse">henri matisse</a></dd>
<dd><a href="#" title="vincent van gogh">vincent van gogh</a></dd>
<dd><a href="#" title="william turner">william turner</a></dd>
<dd><a href="#" title="john constable">john constable</a></dd>
<dd><a href="#" title="claude monet">claude monet</a></dd>
</dl>
</div>
效果演示

[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网