在網上看了一個效果不錯的面包屑鏈接效果，先看看效果:
鏈接的效果還不錯，引起了我的興趣。把代碼分析了一下。
需要一張圖片 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.aygfsteel.com/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.aygfsteel.com/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.aygfsteel.com/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背景色*/}