在网上看了一个效果不错的面包屑链接效果，先看看效果:
链接的效果还不错，引起了我的兴趣。把代码分析了一下。
需要一张图片 7*56 ，这张图片上半部分是>里面内容透明，下半部分是>外面内容透明。
这种面包屑效果的难点在于不规则的hover相应区域。两个相邻链接标签A有重叠部分，链接通过A标签相应hover效果。
重叠部分使用I标签，这样在响应当前链接时I标签能有左边>效果。相邻的链接响应时使用A标签重叠部分显示出右边>标签。第一个链接没有i标签，不需要左边的>效果。
HTML代码：
<div id="breadcrumbs">
<a class="crumbs-item" href="###"><strong>首页</strong></a>
<a class="crumbs-item" href="###"><i></i>板块1</a>
<a class="crumbs-item" href="###"><i></i>子板块1</a>
<span class="crumbs-item current"><i></i><strong>议题1</strong>
</span>
</div>
CSS代码：
#breadcrumbs{ margin-top:8px;overflow:hidden;border:1px solid #FFC3A5; height:28px; padding:0 1em 0 0;background:url(http://www.blogjava.net/images/blogjava_net/hafeyang/menubg.gif) repeat-x #fa9558;line-height:27px;*line-height:26px;text-align:left;}
#breadcrumbs .crumbs-item{ overflow:hidden; height:28px; padding:0 1.3em 0 1.3em;background:url(http://www.blogjava.net/images/blogjava_net/hafeyang/breadcrumbs-item.gif) right top no-repeat; float:left; position:relative ; margin-right:-7px;/* margin-right:-7px;重叠效果*/}
#breadcrumbs .crumbs-item .strong{color:#60afe6;*line-height:29px;_line-height:29px;}
#breadcrumbs .crumbs-item i { position:absolute; height:28px; width:7px; left:0px; top:0;/*i使用绝对定位7*28*/}
#breadcrumbs .crumbs-item:hover i{ background:url(http://www.blogjava.net/images/blogjava_net/hafeyang/breadcrumbs-item.gif) right bottom no-repeat;}
#breadcrumbs .crumbs-item:hover{ background-color: #fa9558;text-decoration:none;/*由于breadcrumbs-item.gif背景部分透明，设置背景色即hover背景色*/}