这样的效果一样只需要 HTML 及 CSS 就能做出来了，我们先来看 HTML 的部份：
检视原始码 HTML
XML/HTML Code复制内容到剪贴板
<body>
<ul id="menu">
<li><a href="#" class="home">首页</a></li>
<li><a href="#" class="car">购物车</a></li>
<li><a href="#" class="good">推荐商品</a></li>
<li><a href="#" class="query">订单查询</a></li>
</ul>
</body>
同样是用 UL 及 LI 来做选单的项目，每一个 LI 中的 A 连结是我们主要的选单内容，且为了让每个选单都有不同的选单图片，所以还帮 A 连结都加一个独立的 class。
接着开始动手写 CSS 囉：
检视原始码 CSS
CSS Code复制内容到剪贴板
#menu {
margin: 20px 0 0;
padding: 0;
height: 62px; /* 选单图片的高 */
list-style: none;
overflow: hidden;
width: 432px; /* 98 * 4 + 5 * 8 */
border-bottom: 1px solid #ccc;
}
#menu li {
float: left;
padding: 0 5px;
}
#menu li a {
display: block;
width: 98px; /* 选单图片的宽 */
height: 62px; /* 选单图片的高 */
line-height: 62px; /* ie suck */
text-indent: -9999px;
margin-top: 31px; /* 需要设定为图片宽/2 */
background-repeat: no-repeat;
}
#menu li a:hover {
margin-top: 1px; /* 当鼠标移到选单上时… */
}
/* 帮每一个 A 连结都加入不同选单图片 */
.home {background:url(home.gif);}
.car {background:url(car.gif);}
.good {background:url(good.gif);}
.query {background:url(query.gif);}
这边要注意的是 A 连结的 margin-top 是选单图片高的一半 – 31px，所以超过的部份就不会显示出来；另外，当鼠标移到 A 连结后，再额外订了一个 a:hover { } 来减少它的 margin-top，因此原本看不到的背景部份就会显现出来了。
