两张背景图片纯css实现，测试浏览器：IE6, IE7, IE8, Firefox, Opera, Google Chrome and Safari(PC)。
<!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" xml:lang="en">
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/image-map-menu.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menuHolder {width:690px; height:28px; padding:12px 0 0 60px; background:url(http://www.webjx.com/files/091109/1_013016.png); position:relative; z-index:500; border-top:1px solid #510; border-bottom:1px solid #510;}
#menuHolder table {border-collapse:collapse; position:absolute; left:0; top:0;}
#menuHolder ul {padding:0; margin:0; list-style:none;}
#menuHolder ul ul {position:absolute; left:-9999px;}
#menuInner {padding:0; width:635px; height:28px;}
#menuInner li {float:left; padding-right:20px;}
#menuInner li.terms {padding:0;}
#menuInner li a {display:block; height:28px;}
#menuInner li a b {position:absolute; left:-9999px;}
#menuInner li.home a {width:75px;}
#menuInner li.products a {width:135px;}
#menuInner li.services a {width:125px;}
#menuInner li.outlets a {width:115px;}
#menuInner li.terms a {width:105px;}
#menuInner li a:hover {background:url(http://www.webjx.com/files/091109/1_012958.png); position:relative;}
#menuInner li.home a:hover {background-position:-60px -12px;}
#menuInner li.products a:hover {background-position:-155px -12px;}
#menuInner li.services a:hover {background-position:-310px -12px;}
#menuInner li.outlets a:hover {background-position:-455px -12px;}
#menuInner li.terms a:hover {background-position:-590px -12px;}
#menuInner li:hover {position:relative;}
#menuInner li:hover > a {background:url(http://www.webjx.com/files/091109/1_012958.png);}
#menuInner li.home:hover > a {background-position:-60px -12px;}
#menuInner li.products:hover > a {background-position:-155px -12px;}
#menuInner li.services:hover > a {background-position:-310px -12px;}
#menuInner li.outlets:hover > a {background-position:-455px -12px;}
#menuInner li.terms:hover > a {background-position:-590px -12px;}
#menuInner :hover ul {left:0; top:28px; background:url(http://www.webjx.com/files/091109/1_013016.png); border:1px solid #510; border-width:0 1px 1px 1px; padding-bottom:5px;}
#menuInner :hover ul li {float:none;}
* html #menuInner :hover ul li {float:left;} /* for IE6 */
#menuInner :hover ul li a {background:transparent; color:#000;font:bold 14px/28px verdana, arial, sans-serif; text-decoration:none; padding-left:10px; white-space:nowrap; float:none; width:100%;}
#menuInner :hover ul li a:hover {color:#fff;}
#menuInner li.products a:hover ul {background-position:-155px -40px;}
#menuInner li.services a:hover ul {background-position:-310px -40px;}
#menuInner li.outlets a:hover ul {background-position:-455px -40px;}
#menuInner li.terms a:hover ul {background-position:-590px -49px;}
#menuInner li.products:hover ul {background-position:-155px -40px;}
#menuInner li.services:hover ul {background-position:-310px -40px;}
#menuInner li.outlets:hover ul {background-position:-455px -40px;}
#menuInner li.terms:hover ul {background-position:-590px -49px;}
</style>
</head>
<body>
<div id="menuHolder">
<ul id="menuInner">
<li class="home"><a href="#url"><b>Home</b></a></li>
<li class="products" ><a href="#url"><b>Products</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Digital Cameras</a></li>
<li><a href="#url">Monopods & Tripods</a></li>
<li><a href="#url">Flashguns & Reflectors</a></li>
<li><a href="#url">Telephoto Lenses</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="services" ><a href="#url"><b>Services</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Enlarging</a></li>
<li><a href="#url">Framing & Restoring</a></li>
<li><a href="#url">Printing</a></li>
<li><a href="#url">Copying</a></li>
<li><a href="#url">Sepia Toning</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="outlets" ><a href="#url"><b>Outlets</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">London</a></li>
<li><a href="#url">Gloucestershire</a></li>
<li><a href="#url">East Midlands</a></li>
<li><a href="#url">Glasgow</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="terms" ><a href="#url"><b>Terms</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Payment</a></li>
<li><a href="#url">Conditions</a></li>
<li><a href="#url">Privacy Policy</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
用到的两个图片：
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
