仿苹果官方网站纯CSS菜单

演示效果截图

用到的图片

CSS代码

<style type="text/css">
<!--
html,body { height:100%; background:#fff; }
body { font:12px "宋体",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 { 490px; height:38px; margin:15px 0 0 10px;
overflow:hidden;background:url(globalnavbg.png) no-repeat; }
#nav li,#nav li a { float:left; display:block;
117px; height:38px; background:#fff; }
#nav li a { 100%; text-indent:-9999px;
background:url(globalnavbg.png) no-repeat 0 0; }
#nav .n01 { 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; }
-->
</style>

HTML代码

<div id="nav"><ul>
<li class="n01"><a href="http://www.865171.cn">index</a></li>
<li class="n02"><a href="http://www.865171.cn">Store</a></li>
<li class="n03"><a href="http://www.865171.cn">Mac</a></li>
<li class="n04"><a href="http://www.865171.cn">iPod + iTunes</a></li>
<li class="n05"><a href="http://www.865171.cn">iPhone</a></li>
<li class="n06"><a href="http://www.865171.cn">Downloads</a></li>
</ul></div>
<h3>www.865171.cn</h3>