纵向导航也是网站应用中的一种重要形式，所谓纵向导航是指放置在网页左边或右边的从上至下排列的一种导航形式。本例中我们希望设计一套纵向导航来帮助用户浏览网站。类似于电子商务网站，在每一页面都需要一套辅助的导航系统毳来帮助用户查找各个分类的商品，途吁候纵向导航就能派上用场了。
我们使用纵向导航的目的主要是让用户方便找到网站中的文章，天津网站建设，天津网站制作，天津网站优化，天津网络公司，更类似于msn.com主要的形式，应该有一个二级分类及其下属的内容，如CSS下可能会出现CSS入门、CSS技巧等子栏目。我们延续上一章导航设计的思路，但换一种方式来组织我们的导航部分的结构代码。
为了方便大家观看代码，在本段代码中不再给每段文字加上链接<a>标签。这次的XHTML部分的代码比横向导航略有不同，我们没有继续使用ul和li标签，其实继续使用ul、li；也能完好的实现纵向导航系统，但是在这里我们希望提供不同途径来展现css局设计的灵活与方便性以便于抛砖引玉，开拓更多的设计思想。
这一次采用的标签是div+hl+h2的形式。我们使用div标签设定了一个导航的结果区域，在这个区域中我们使用hl来作二级分类的标题，h2来做二级分类下面的细节内容，在xhtml的语法结构中，h1,h2,h3,这些标签本身就具有用于对文本进行层级划分的意义，直接使用hl, h2来表示层级关系，相对于在标签中加入或class来做层级的标记更为简单和直观， 在这里使用hl, h2来标记不同级别的分类名称也实在是再合适不过了。CSS代码部分还是沿用以前的思路。对id为category的div定义了宽度，以及让它的right，bottom和left三条边框产生灰色的1px宽度的线条。