<ul id="nav"> <li id="current"><a href="/index.asp">主页</a></li> <li><a href="/Sort/List_4.html">DIV+CSS教程</a></li> <li><a href="/Sort/List_5.html">常用代码</a></li> <li><a href="/Sort/List_6.html">水晶图标</a></li> <li><a href="/Sort/List_7.html">幻灯图片</a></li> <li><a href="/Sort/List_10.html">软件下载</a></li> <li><a href="/css2/">CSS2.0实用手册</a></li> </ul>
我们在第一个a标签中加入了一个新的id，名为current，继续看css部分的编写，先为current这个id做个颜色设计：
#nav li a#current { background-color:#2788da; color:#fff;}预览一下效果，首页的背景色已经变成蓝色了
<style>
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center;
background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>继续来完善我们的导航，页菜单下加一条横线
#nav { height:26px; border-bottom:2px solid #2788da;}我们给ul标签设置了高度，并且给它的底部加上了2px的实线，再次预览一下效果，和我们当初想像的标签式导航已经大同小异了，回到nav元素的定义，border-bottom是我们新加入的一个属性，指的是元素的下边框的设置，它的参数指的是2px的宽度、单实线样式、颜色值为#2788da，通过这样的设置，我们的ul标签就拥有了2px带色彩的下边框。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>
</body>
</html>简单的标签式的导航通过一组css的设计就算完成了，每当换一个频道页面时，只需要将id="current"移动到当前频道所在的a元素中，即可完成颜色的切换。不需要重俗人编写颜色属性，而且需要修改进也可以方便在css中修改完成。
有关本例中应用XHTML中元素间的CSS属性继承的问题。
何为继承呢？继承指的是每一个元素可以有多个样式，在普通情况下，他遵守最外层的样式设计，如果遇到对其自身的样式设计，他将继承外层样式的基础上，优先考虑自身的样式。
如果内层的样式和外层的样式有冲突，则最终显示的是内层的样式效果。
本例中还接触到一个新的属性：list-style:none;在预览用的样式代码内。
在默认情况下，ul内的li列表形式前边带有圆点的，从以前的章节可以看到。本句的意思是去掉前边默认的圆点。