怎么实现苹果网站的导航条效果？

查看了苹果网站(www.apple.com.cn)的原码，但是看不懂，找到下面这张图片，怎么使它显示为第二张图片的效果呢?图片二：

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

当前页的栏目图片为深黑  css控制划过a:hover  然后css点击效果是是a:link（这个记不太清应该是）  如果这几个栏目是一张图片那么使用css sprite技术其实很简单就是背景定位
你指的这效果？<!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>
    <title></title>
    <style type="text/css">
        .div { color: White; font-weight: bold; text-align: center; width: auto; height: 30px; line-height: 30px; margin-left: 1px; padding: 0px 10px 0px 10px; background-color: #5B5B5B; float: left; }
    </style>    <script type="text/javascript">
        function initEvent() {
            var MainDiv = document.getElementById("Mdiv");
            var divs = MainDiv.getElementsByTagName("div");
            for (var i = 0; i < divs.length; i++) {
                if (divs) {
                    divs[i].onmouseover = changecolor;
                    divs[i].onmouseout = defaultcolor;
                    divs[i].style.cursor = "pointer";
                }
                else
                    return;
            }
        }
        function changecolor() {
            this.style.background = "#8E8E8E";
        }
        function defaultcolor() {
            this.style.background = "#5B5B5B";
        }
    </script></head>
<body onload="initEvent()">
    <div id="Mdiv" style="margin-left: auto; margin-right: auto; width: 500px; background-color: Black;">
        <div class="div">
            在线商店</div>
        <div class="div">
            Mac</div>
        <div class="div">
            iPod</div>
        <div class="div">
            iPhone</div>
        <div class="div">
            iPad</div>
        <div class="div">
            iTunes</div>
    </div>
</body>
</html>
纯css伪类也能实现，如1L所言
这是整张图片，CSS怎么实现?
晕，你说的是那个滑动块那个啊，那个通过jQuery实现，你可以找现成的插件苹果网站你也可以进入product_browser.js查找（pb-productsliderhandle）和（pb-productsliderhandleimage）看源代码我没写过这东西，所以不清楚
css sprite 背景图片定位