Please note that the background image inside is PNG transparent, so you must set the color in Li to block the background of the UL and the background of a map overlap.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" lang= "ZH-CN" xml:lang= "ZH-CN" > <pead> <meta http-equiv= " Content-type "content=" text/html; Charset=utf-8 "/> <title>mac menu </title> <style type=" Text/css "> <!--html,body {height:100%; b Ackground: #fff; Body {font:12px "Arial", Arial,sans-serif color: #333;} Body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 {padding:0; margin:0;} UL,OL,DL {list-style:none;} #nav {width:982px height:38px; margin:15px 0 0 10px; overflow:hidden; Background:url (yun_qi_img/globalnavbg.png) No-repeat; #nav Li, #nav li a {float:left; display:block; width:117px; height:38px; background: #fff;} #nav Li a {width:100% text-indent:-9999px; Background:url (yun_qi_img/globalnavbg.png) no-repeat 0 0;} #nav. N01 {width:118px} #nav. N01 a:visited {background-position:0-114px } #nav. n01 a:hover {background-position:0 -38px;} #nav. N01 a:active {background-position:0 -76px;} #nav. N02 A:link {background-position:-118px 0;} #nav. n02 a:visited {background-position:-118px-114px;} #nav. n02 a:hover {background-position:-118px-38px;} #nav. n02 a:active {background-position:-118px-76px;} #nav. N03 A:link {background-position:-235px 0;} #nav. n03 a:visited {background-position:-235px-114px;} #nav. n03 a:hover {background-position:-235px-38px;} #nav. n03 a:active {background-position:-235px-76px;} #nav. N04 A:link {background-position:-352px 0;} #nav. n04 a:visited {background-position:-352px-114px;} #nav. n04 a:hover {background-position:-352px-38px;} #nav. n04 a:active {background-position:-352px-76px;} #nav. N05 A:link {background-position:-469px 0;} #nav. n05 a:visited {background-position:-469px-114px;} #nav. n05 a:hover {background-position:-469px-38px;} #nav. n05 a:active {Background-position:-469px-76px; } #nav. n06 a:link {background-position:-586px 0;} #nav. n06 a:visited {background-position:-586px-114px;} #nav. n06 a:hover {background-position:-586px-38px;} #nav. n06 a:active {background-position:-586px-76px;} #nav. N07 A:link {background-position:-703px 0;} #nav. n07 a:visited {background-position:-703px-114px;} #nav. n07 a:hover {background-position:-703px-38px;} #nav. N07 a:active {background-position:-703px-76px;} --> </style> </pead> <body> <div id= "nav" > <ul> <li class= "N01" >index </li> <li class= "N02" >Store</li> <li class= "N03" >Mac</li> <li class= "N04" & Gt;ipod + itunes</li> <li class= "N05" >iPhone</li> <li class= "N06" >Downloads</li> <li class= "N07" >Support</li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]