點擊這里查看效果：
http://keleyi.com/keleyi/phtml/divcss/17.htm
效果圖：
以下是源代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>css制作漂亮彩帶導航條菜單-柯樂義</title><base target="_blank" /> 6 7 <style type="text/css"> 8 body{margin:0;padding:0;background-color:#000;font:normal 14px/24px "\5FAE\8F6F\96C5\9ED1";color:#fff;} 9 a{color:#f00893} 10 /* mydiv */ 11 .mydiv{margin:100px auto 0;line-height:40px;position:relative;padding:0 40px;float:left;} 12 .mydiv a{height:40px;text-decoration:none;color:#000;float:left;} 13 .mydiv a span{background-color:#fff;display:block;float:left;height:40px;position:relative;padding:0 13px;cursor:pointer;} 14 /* 對於這個 我很費解 在IETester測試的時候 必須給a:hover 設置給 a 沒有的屬性*/ 15 .mydiv a:hover{_display:block;} 16 .mydiv a:hover span{top:-6px;background-color:#FFD204;text-shadow:0 0 10px #000;} 17 .mydiv a:hover i, .mydiv a:hover b{position:absolute;border:3px solid #fff;width:0;height:0;line-height:0;bottom:-6px;font-style:normal;font-weight:normal;} 18 .mydiv a:hover i{left:0;border-color:#9B8651 #9B8651 #fff #fff;} 19 .mydiv a:hover b{right:0;border-color:#9B8651 #fff #fff #9B8651;} 20 .item{border:20px solid #fff;border-left-color:#000;position:absolute;line-height:0;left:0;top:0;} 21 .item2{border-left-color:#fff;border-right-color:#000;right:0;left:auto;} 22 </style> 23 24 </head> 25 <body> 26 27 <div style="width:650px;margin:0 auto"> 28 29 30 <div class="mydiv"> 31 <span class="item"></span> 32 <a href="http://keleyi.com/a/bjac/iqiiedy2.htm"><span><i></i>聖誕快樂<b></b></span></a> 33 <a href="http://keleyi.com/a/bjac/flyuqb6r.htm"><span><i></i>雪花效果<b></b></span></a> 34 <a href="http://keleyi.com/a/bjad/vvks7sw7.htm"><span><i></i>WinForm<b></b></span></a> 35 <a href="http://keleyi.com/a/bjad/q2ee2xyt.htm"><span><i></i>放大鏡<b></b></span></a> 36 <a href="http://keleyi.com/menu/javascript/"><span><i></i>javaScript<b></b></span></a> 37 <a href="http://keleyi.com/menu/jquery/"><span><i></i>jQuery<b></b></span></a> 38 <span class="item item2"></span> 39 </div> 40 41 42 </div> 43 <br /> 44 <div style=" width:600px;margin:0 auto; text-align:center; font-size:12px;clear:both"> 45 <p><a href="http://keleyi.com/a/bjad/3rn3axhe.htm">原文</a>由柯樂義整理，查看更多特效：【<a href="http://keleyi.com/" target="_blank">柯樂義</a>】keleyi.com</p> 46 <p>＊尊重他人勞動成果，轉載請自覺注明出處！注：此代碼僅供學習交流</p> 47 <p></p> 48 </div> 49 </body> 50 </html>