有的时候您经常希望打开展开侧边导航列表，这样便可以得到该部分内部的链接。最行之有效的方法是使用嵌套列表。
CSS 代码
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}
#navcontainer li li a
{
display: block;
color: #FFF;
background-color: #69C;
width: 9em;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
}
HTML 代码
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a>
<ul>
<li><a href="#">Goat</a></li>
<li><a href="#">Cow</a></li>
</ul>
</li>
<li><a href="#">Eggs</a>
<ul>
<li><a href="#">Free-range</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><a href="#">Cheese</a>
<ul>
<li><a href="#">Smelly</a></li>
<li><a href="#">Extra smelly</a></li>
</ul>
</li>
</ul>
</div>
用一个无序列表开始。列表项都是可以点击的（都包含<a href="#"> </a>）。但是这并不是必需的。有些CSS是为了“a”元素而特别设置的。本例中“#”用来指向自身页面的链接。请注意一个嵌套列表应该写在<li>和</li>之间。
设置"list-style-type"属性的值为"none"可以删掉HTML中的列表项符号。
#navcontainer ul { list-style-type: none; }
标准HTML列表带有一定的左缩进。各个浏览器对此的缩进幅度也不尽相同。有的浏览器(Mozilla, Netscape, Safari)使用内边距设定所进的比例，而有的浏览器(Internet Explorer, Opera)却使用外边距。
为了删掉浏览器惯有的左缩进，我们设置列表的"UL"标签的内边距和外边距属性值均设为"0"。
margin: 0;
padding: 0;
列表项可以通过设置“display”属性的值为“block”来实现滚动效果。
#navcontainer a { display: block; }
我们在“a”标签上设置背景颜色。当然背景色要与字体颜色有足够的对比度。
color: #FFF;
background-color: #036;
为了使每一个列表项的整个块都能够被“a”标签覆盖，我们还需要设置以下列表的宽度。
width: 9em;
为列表项中的“a”标签设置内边距。
padding: 3px 12px 3px 8px;
您可能希望去掉文本的下划线。因为导航栏的位置和其他反馈机制能够很明显地被看作一组链接，所以我们经常要将导航栏中的链接文本中的下划线去掉。当然，您也应该注意修改标准超链接的行为会使可能无法意识到这些列表项是链接的用户感到困惑。
text-decoration: none;
使用“a:hover”来设置二级背景色，作为滚动效果所使用的颜色。如果您现在用鼠标在列表上滚动，您将会看到滚动效果。
#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}
由于列表项现在已经分开了，它们非常容易辨认。我们不推荐使用设置外边距的方法使列表项分开，原因是它在不同浏览器中显示得不稳定。另一种相对安全的方法是使用边框来设置，例如"border-bottom: 1px solid #fff"。
对于Opera浏览器来说，需要将“LI”标签的外边距设为0以避免错误。可以通过以下方法进行设置："#navcontainer li { margin: 0; }"。
基本列表已经完成但是列表与嵌套列表仍然没有区别。
#navcontainer li { margin: 0; }
border-bottom: 1px solid #fff;
为嵌套列表设置规则的第一步是复制规则"#navcontainer a"。然后我们需要改变嵌套列表的外观。如果我们将刚刚复制的规则进行以下简单的修改："#navcontainer li li a"，那么它将会只对嵌套列表项起作用。现在我们需要修改规则集内的样式。
#navcontainer li li a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
}
在"#navcontainer li li a"的规则集中改变背景颜色，这样就可以区分嵌套列表项与主列表项。
background-color: #69C;
可以使嵌套列表项在主列表项内部显示的一种方法是为它们设置缩进。这可以通过修改内边距的值，即将内边距由原来的"3px 12px 3px 8px"改为"3px 3px 3px 17px"来实现。这相当于内边距"top: 3px", "right: 3px", "bottom: 3px" 和 "left: 17px" - 从上开始顺时针方向进行设置。
对于本例模型，您需要注意嵌套列表的左右内边距之和要与主列表保持一致。主列表项使用"right: 12px", "left: 8px;", 因此嵌套列表的左右内边距之和应为20px。
padding: 3px 3px 3px 17px;
在完成之前，您可以将您的主列表项设置为粗体而嵌套列表项设置为普通。请注意您必须特别指定嵌套列表为普通，否则主列表项的粗体设置会被嵌套列表继承同样显示为粗体。