在前面的文章中学习《用列表ul制作CSS横向菜单的基础知识》http://www.52css.com/article.asp?id=395。以及《蓝绿色调》http://www.52css.com/article.asp?id=396 《会动的小竖条》http://www.52css.com/article.asp?id=401 《红蓝炫》http://www.52css.com/article.asp?id=404 等等一些CSS横向菜单的制作方法。CSS横向菜单的制作大家或许已经都能掌握了，但小小的菜单包含了许多的变化，我们完全可以将它做的更漂亮！
我们今天所要讲述的依然是CSS横向菜单的制作，这与前面的例子有所区别，我并不仅要看到视觉上的变化，我们还要让它更实用，我们通过这个小案例来向你阐明CSS当前页效果是如何实现的。让我们开始吧！
Example Source Code [www.52css.com]
这是HTML代码，除了一个菜单的无序列表UL，还多了一些东西，下面的topline是一个分隔线，我们只是设置一下背景色，我们就不去讨论了；我们发现给body命名了一个id！它的作用就是用来制作当前页效果的，是让选择符精确的找到目标。我们在菜单无序列表内的链接元素都命名了不同的id，从cur1至cur6。我们在下面详细的讨论它究竟如何发挥作用。
看CSS代码：
Example Source Code [www.52css.com]* {
margin:0;
padding:0;
font-size:12px;
text-align:center;
}
body {
background:#ffff;
}
#nav {
width:700px;
margin:20px auto 0 auto;
}
#nav li {
display:inline;
list-style-type:none;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:1px;
height:26px;
line-height:26px;
padding:0 8px;
text-decoration: none;
color:#333;
background:url(link.jpg);
}
#nav li a:hover {
color:#000;
background:url(hover.jpg);
}
#home #nav li a#cur1,#divcss #nav li a#cur2,#csslayout #nav li a#cur3,#css20 #nav li a#cur4,#websites #nav li a#cur5,#moban #nav li a#cur6 {
color:#fff;
background:url(current.jpg);
}
#topline {
width:100%;
height:3px;
overflow:hidden;
background:#06f;
}
第一区块的整体布局声明；第二区块是body的背景色，或许有人会说，白色可以不设置了，不过需要提醒各位，有些浏览器默认的body颜色不一定是白色哦，还是别嫌麻烦设置一下#fff；第三区块设置菜单无序列表ul的宽度及边距。第四区块列表项的有关声明。
第五区块就轮到链接元素了。向左浮动，右边距为1px，使菜单之间有一定的间隔，高度26px，行高26px，这两项声明，一方面是设置了菜单的高度，另一方面行距的设置可以让文字垂直居中对齐了，如果缺少了行高，看上去就不那么美妙了。声明填充，上下是0px、左右是8px，上下填充不用设置，因为已经有行高让文字与外边产生了距离，声明左右填充是在水平方向上让文字与外边有一定的距离。
去除链接文字下划线，链接文字的颜色为#333深灰色。设置背景图片为link.jpg。此例中背景图片就是一个渐变色的区块，我们不提倡过多的使用CSS滤镜实现这样的效果，对于这样的视觉效果，个人认为用背景图片比较好，一方面是提高了代码执行效率，另一方面图片文件体积小于1K（三个文件累积不大于1K），不会占用带宽。
第六区域设置了链接我激活hover样式，文字颜色变成了黑色#000。背景图片也变成了hover.jpg。
第七区域是此例的重点了。CSS当前页效果就是通过它来声明的，选择符我们罗列了一大圈，请注意：这六个选择符所对应的元素应用的样式是一致的，因为他们是通过“,”分隔的，这么长的字母或许你看了感觉眼花，我们分解如下：
Example Source Code [www.52css.com]#home #nav li a#cur1,
#divcss #nav li a#cur2,
#csslayout #nav li a#cur3,
#css20 #nav li a#cur4,
#websites #nav li a#cur5,
#moban #nav li a#cur6
我们应该能理解这些选择符的含意，拿第一个来说：表示在id为home下面的一个id为nav的列表项的a的cur1。这样我们就精确的命中目标了！
其它的五个含义与之类似，我们发现，除了第一个（#home）与最末（#cur1），选择符之间的结构是一样的。在上面我们给body命名一个id为home。而且我们为不同的链接赋予了不同的id，从cur1至cur6。
这时候它们就发挥作用了。这就表示在body的id为home的这一页，菜单中id为cur1的链接所应用的样式。与此类推：在body的id为divcss的这一页，菜单中id为cur2链接所应用的样式；在body的id为csslayout的这一页，菜单中id为cur3链接所应用的样式……
我们只需要改变body的id，再通过CSS的设置，就可以形成了菜单的当前页效果。当然，你也需要在HTML编写之初，就给你的菜单赋予一个id。
这在动态页的制作中是非常有用的。例如我们将菜单部分制作成一个独立的*.asp文件或者直接写在数据库中，然后在需要的页面直接include这个文件或读取数据库。要实现当前页的效果，我们只需要改变一个body的id就全部搞定了。这就是当前页效果的思路。
最后一个区块我们只是加了一个装饰性的小色条，无须多说，只是需要提醒你的是overflow:hidden;的设置，如果没有这一条声明，我们的小色条可能不是这样的最小高度。
点击查看此例的最终效果
点击下载本例源代码