将列表制作成一个导航栏
CSS 样式负责将这个列表标记转换成一个能用的导航栏。下面这段来自图A的 CSS 代码片断展示了如何控制嵌套列表的样式，并产生我们需要的滚翻效果。（出于篇幅的考虑，我省略了与导航栏技术不相关的样式。）
#nav {
position:absolute;
left:10px;
top:120px;
width:200px;
background-color:#FFFF99;
height:300px;
}
#nav ul {
list-style-type:none;
margin:0px;
padding:0px;
text-indent:0px;
}
#nav li {
height:24px;
line-height:24px;
}
#nav li {
width:190px;
}
#nav li ul li {
width:170px;
}
#nav li.category {
padding-left:10px;
height:auto;
color:blue;
}
/*IE needs extra margin and padding set for the indented li */
* html #nav li ul li {
margin-left:-10px;
padding-left:10px;
}
/* end IE hack */
#nav li a,
#nav li ul li a {
font-weight:normal;
text-decoration:none;
display:block;
height:100%;
width:100%;
padding-left:10px;
}
#nav li.category ul li a {
margin-left:-10px;
padding-left:30px;
}
#nav li a:link,
#nav li a:visited {
color:blue;
background-color:#FFFF99;
}
#nav li a:hover,
#nav li a:active {
color:white;
background-color:blue;
}
#nav样式控制包含导航栏的 div 的大小和位置。注意其中的 width:200px规则。其它一些包含宽度规则的样式必须通过计算得到宽度，以落在这个范围之内。
#nav ul样式只是用来简单地取消导航栏列表的默认列表样式。这样就允许我们在不与缩进的继承属性打交道的情况下控制列表的样式。
#nav li样式设置每个列表项的宽度（height:24px）并在那个高度内垂直居中文本。注意，这是一个独立的样式，用于定位列表项标签（li），而不是将这些规则包括在 #nav ul样式中。这样就允许我们为带有 #nav li.category的类别列表项设置不同的高度。
第二个 #nav li样式将第一级列表项的宽度设置为 div 的宽度减去这些列表项的左间距（padding）。相似的，#nav li ul li样式设置缩进列表项的宽度，通过减去总缩进量得到。
类别列表项不包含链接，所以 #nav li.category样式设置这些项的间距（padding）和颜色，以匹配其它第一级列表项从下面其它样式中获得的格式。此外，height:auto规则允许类别列表项的扩展，以容纳嵌套列表。如果没有这个规则，那么在很多与标准兼容的浏览器中，嵌套列表项就会覆盖后面的第一级列表项（在 IE 中不会）。
说到 IE，永远的问题是子列表项需要一点额外的帮助才能使缩进的列表项正确地定位。所以 * html #nav li ul li样式包括负值左边距（margin-left:-10px）和正值左间距（padding-left:10px），且左间距的值等于类别列表项左间距的值。*-html 选择器（selector）将这些值提供给 IE，但不提供给其它浏览器。
#nav li a, #nav li ul li a样式包含用于按钮栏中的链接的典型规则。font-weight:normal和 text-decoration:none规则消除我们在导航栏的链接中不需要的默认样式。display:block, height:100%和 width:100%规则使整个块可点击。而 padding-left:10px规则为可点击的第一级列表项提供一个小的左边距。（使用margin-left:10px 能够创建同样的边距，但是却是不可点击的。）
#nav li.category ul li a样式为嵌套列表项建立缩进。首先，margin-left:-10px规则反向从父列表项继承来的缩进；然后，padding-left:30px为缩进的列表项设置完全的缩进。结合使用负值边距和等于组合缩进的间距允许可点击区域（以及滚翻背景颜色）扩展到 div 的左边界，而不是停留在父列表项的间距内。
剩下的样式设置不同按钮状态的前景色和背景色。为了简便，我对 link 和 visited 状态使用了同样的颜色，对 hover 和 active 状态也使用了同样的颜色。
虽然这个例子只展示了嵌套子列表的一级缩进，但是你可以很容易地将这个基本方法扩展到两级、三级或更多级缩进。你还可以向类别列表项添加链接。
