我看到了网上有一些例子..我就来凑个热闹..说下我自己的做法..

大家先可以看一下最终的效果 http://resume.skiyo.cn/

我的做法相对比较简单..大部分工作都是css来做的..

首先我们需要看上去差不多是下面的一张菜单图片..你可以点击之后看大图..

然后我们就来写HTML了..注意.重点就在这里..我让a在li的上面..遮盖住li..

以下是代码片段：
<div id="menu"> 
  <ul> 
    <li id="nv_about"><a href="#about_anchor"> </a></li> 
    <li id="nv_skill"><a href="#skill_anchor"> </a></li> 
    <li id="nv_works"><a href="#works_anchor"> </a></li> 
    <li id="nv_introduce"><a href="#introduce_anchor"> </a></li> 
    <li id="nv_contact"><a href="#contact_anchor"> </a></li> 
  </ul> 
</div>

CSS为:

以下是代码片段：
#menu { 
    margin-top:10px; 
    width:800px; 
    height:40px; 
} 
#menu li { 
    list-style:none; 
    float:left; 
} 
#menu li a{ 
    display:block; 
} 
#menu #nv_about { 
    width:160px; 
    height:40px; 
    background:url(../images/menu.jpg) no-repeat 0px 0px; 
    /* 这是li的背景 统一为灰色的 */ 
} 
#menu #nv_about a{ 
    width:160px; 
    height:40px; 
    background:url(../images/menu.jpg) no-repeat 0px -40px; 
    /* li上面a的背景..是其他的颜色 */ 
} 
#menu #nv_skill { 
    width:160px; 
    height:40px; 
    background:url(../images/menu.jpg) no-repeat -160px 0px; 
} 
#menu #nv_skill a{ 
    width:160px; 
    height:40px; 
    background:url(../images/menu.jpg) no-repeat -160px -40px; 
} 
#menu #nv_works { 
    width:160px; 
    height:40px; 
    background:url(../images/menu.jpg) no-repeat -320px 0px; 
} 
#menu #nv_works a{ 
    width:160px; 
    height:40px; 
    background:url(../images/menu.jpg) no-repeat -320px -40px; 
} 
#menu #nv_introduce { 
    width:160px; 
    height:40px; 
    background:url(../images/menu.jpg) no-repeat -480px 0px; 
} 
#menu #nv_introduce a{ 
    width:160px; 
    height:40px; 
    background:url(../images/menu.jpg) no-repeat -480px -40px; 
} 
#menu #nv_contact { 
    width:160px; 
    height:40px; 
    background:url(../images/menu.jpg) no-repeat -640px 0px; 
} 
#menu #nv_contact a { 
    width:160px; 
    height:40px; 
    background:url(../images/menu.jpg) no-repeat -640px -40px; 
}

然后我们就可以编写jQuery的代码了..

以下是代码片段：
$(document).ready(function (){ 
    if($.browser.msie && (parseInt($.browser.version) <= 7)){try {document.execCommand("BackgroundImageCache", false, true);}catch(e){}} 
    var a = $(’#menu li a’); 
    a.css(’opacity’, 0);   //默认的先把a弄成透明的 
    a.hover( 
        function() { 
            $(this).stop().animate({’opacity’: 1}, "slow"); 
            //鼠标经过的时候 a标签慢速的显示 遮盖都后面的li 
        }, 
        function() { 
            $(this).stop().animate({’opacity’: 0}, "slow"); 
            //鼠标移开 再把a弄成透明的 
        } 
    ); 
});

好了..这个方法的好处就是js代码相对简单..

但是css的可扩展性很低..= =||

建议继续学习：

1. 120个优秀的水平导航设计    (阅读：73589)
2. 网站导航设计的6大分类    (阅读：7578)
3. 递归并不一定非得是“自己调用自己的function”    (阅读：3052)
4. 实现一个更精简的Tab    (阅读：2284)
5. 关于网站地图    (阅读：2181)
6. 用面包屑来简化多层的tabs    (阅读：2149)
7. 网站导航设计模式指南    (阅读：2135)
8. 给网站布置一个明晰的“关于”页面    (阅读：2060)
9. 看看Gmail的新功能    (阅读：2018)
10. 与众不同易，精益求精难 — QQ导航改版设计心得    (阅读：1979)