>>> 下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材
至上节教程为止，我们已经把主内容区左侧栏目的内容添加完毕了，本节我们来看一下右侧边栏的内容如何实现。之前我们为了更好的实现背景效果，把侧边栏划分成了两个模块，我们只在背景纵向平铺的sidecontent容器中添加内容。观察一下最终效果图中的侧边栏内容，依照一般的思维，我们会认为它里面有两个带有各自标题的列表：
当然这种思维是正确的，在之前的教程中我们也实现过结构类似的内容模块。但这次我们换个思路来考虑，这么规则的分行元素，我们是不是可以用一个列表来实现呢？看一下下面的结构：
这里我们运用了列表嵌套，首先是一个ID为menu的无序列表，它包含四个列表项目，分别是两个H2标题和两个子级列表，几个文本链接则分别放置到子级列表的项目中。一下子难以理解的话，花点时间仔细看一下，相信很快就能摸出个头绪来。当然并不是说一定要这样做，只不过想告诉大家，有时候灵活的转换一下思路，很多相同的效果可以用不同的方法实现出来，这对学习和巩固CSS知识是很有帮助的。那么接下来我们就看一下，这种结构的内容元素，怎么利用CSS来调整它的外观样式。首先是去除父列表和子列表的项目修饰符号：
#menu {list-style:none;}
#menu li ul {list-style:none;}
然后是两个标题文本的样式：
#menu h2 {
border-bottom:solid 1px #D2E6CA;
padding:5px;
margin:10px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
color:#690;
font-weight:bold;
}
主要是字体方面的样式定义，以及灰色的下边框。对于子级列表中的列表项，我们除了设置边框之外，还要定义一个高度值来获得比较舒适的行高：
#menu li ul li {
height:25px;
border-bottom:solid 1px #efefef;
}
然后是针对列表项中链接的样式定义：
#menu li ul a {
display:block;
height:20px;
padding:5px 5px 0px 5px;
text-decoration:none;
color:#333;
}
#menu li ul a:hover {
background:#F8F9F2;
color:#000;
}
最后一个需要调整的地方就是menu列表的位置，现在它与页面中的一些内容元素以及侧边栏背景图重叠了，最主要是列表左侧边缘的位置，我们利用边界属性margin来设置一些间隔距离：
#menu {
... ...
margin:0 16px 0 24px;
}
OK侧边栏的内容及其样式设定就差不多完成了，这节中关于CSS规则作用的解释稍微简略了一点，但是相信如果认真的学习了之前的教程内容，看懂也是很应该的事情哈哈。当然可以肯定的说，我这里的CSS样式定义并不是最简洁扼要的，更不是唯一的，或者说很多规则也可以用另外的CSS属性来替代，这就要靠大家多多练习多多摸索，从中总结、提炼出自己的经验和技巧了。