一般情況下導航菜單的背景圖片都是比較有規則的，但是平時我們也會遇到很多背景圖片形狀不規則導航條（比如但鼠標移上的時候，背景圖片不規則，本例只討論此種類型）,如下圖所示：
（圖一）
當鼠標移上去的時候背景變成紅色箭頭，也許，咋一看，覺得這個效果並沒有什么特別的地方，但是仔細看看我畫上去的綠色框框部分，就會發現每一塊都是接在一起的不會斷開的；如果說按照普通方法來做，那么實現的可能是下圖所示的效果：
（圖二）
即是塊與塊之間是斷開的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery.js"></script> <!-- wbg解決ie6下的背景 勿動！！！--> <!--[if IE 6]> <script src="js/ie_png.js" mce_src="js/ie_png.js"> </script> <script type="text/javascript"> DD_belatedPNG.fix('.previous,img'); </script> <![endif]--> <style type="text/css"> body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; list-style:none; } body img{ border:none; } a{ color:#000; border:0; text-decoration:none; } a:hover{ color:#f00; text-decoration:none; } #warp{ margin:20px auto; width: 960px; } body{ background:url(img/bj.jpg) no-repeat center top #090909; } .nav{ background:url(img/nav_bj.png) right no-repeat; _background:url(img/nav_bj.gif) right no-repeat; height:47px; width:638px; } .nav ul li{ float:left; margin:0 -7px;/*這里的marign是實現這個效果最關鍵的地方*/ display:inline; width:104px; } .nav ul li a{ display:block; color:#FFFFFF; padding:7px 0px; _padding:5px 0px 6px; width:104px; float:left; text-align:center; font-family:Microsoft YaHei !important; } .nav ul li a span{ display:block; } .nav ul li a:hover{ background:url(img/a_hover.png) no-repeat; _background:url(img/a_hover.gif) no-repeat; color:#fff; } .nav ul .home a:hover{ background:url(img/home_hover.png) 7px center no-repeat; _background:url(img/home_hover.gif) 7px center no-repeat; } </style> <title></title> </head> <body> <div id="warp"> <div class="nav"> <ul> <li class="home"><a href=""><span>Home</span>首頁</a></li> <li><a href=""><span>About</span>關於九弘</a></li> <li><a href=""><span>Serve</span>服務項目</a></li> <li><a href=""><span>Case</span>活動案例</a></li> <li><a href=""><span>Information</span>公司動態</a></li> <li><a href=""><span>Partners</span>合作伙伴</a></li> <li><a href=""><span>Contact</span>聯系方式</a></li> </ul> </div> </div> </body> </html>
在這個效果的實現過程中最關鍵的地方就是把“li”的margin值左右兩邊設為負數，然后把“li”和”a“的寬度設成一樣，這樣”a“的寬度就是固定的了，而”li“左右兩邊因為有margin，所以會縮小。