7.7　设置嵌套列表样式

7.7　设置嵌套列表样式

本章第4节已经介绍了列表嵌套，即列表里面还有列表。本节主要结合CSS样式表，利用列表嵌套，实现复杂的导航。网页实例如图7-14所示。

图7-14　网页实例

该网页包含两个导航栏，即页眉部分的主导航以及右侧的侧边栏导航。侧边栏导航可以通过列表嵌套制作出来。它的基本制作步骤如下：

（1）建立HTML相关结构，通过无序列表的嵌套，搭建导航条的层次关系。这里用了两个＜div＞标签，外层无序列表定义在＜div id＝＂link1＂＞中，内层嵌套的无序列表定义在＜div id＝＂link2＂＞中。代码如下：

运行这段代码，结果如图7-15所示。

（2）设置CSS样式。首先定义外层＜div＞相关属性如背景等，再通过.link1 ul选择器设置外层无序列表＜ul＞的list-style-image属性为指定的小图标，然后定义＜li＞的相关属性，包括字体颜色、内间距等。CSS代码如下：

图7-15　列表嵌套

（3）定义内层＜div＞样式，.link2 ul设置内层无序列表＜ul＞的属性，并定义＜li＞的相关属性。CSS代码如下：

完成后的嵌套列表效果如图7-16所示。

图7-16　嵌套列表