很多 Web 站点上都有水平导航栏——这一点也不奇怪，水平导航栏是组织链接的一个很好的方式。最简单的导航栏只由一串普通文本链接组成。然而，越来越多的 Web 开发人员把列表项制作成按钮形状，并结合使用 CSS 滚翻效果使整个按钮表面看起来可点击。
如果导航列表很长的话，那么将一些链接分类通常会很有帮助；导航列表的类别一般由列表项以摘要样式的缩进表示。基本的缩进列表结构可以很简单地用嵌套列表构建，但是还有其它一些窍门来控制那些列表的样式，以获得期望的导航栏滚翻效果。
目标
我们的目标是生成一个导航栏，该导航栏中的链接以摘要样式分层组织，如图A所示。每个顶层列表项是一个完全可点击的按钮，并且具有滚翻效果。在类别项下面缩进的是更多可点击的列表项，这些列表项也具有滚翻效果。在这种情况下，类别项不是链接（它们只是一个个的标签，用于表示缩进的子列表项），但是向这些元素添加链接也非常简单。（注意：在图A中没有任何链接，它们只是用来示范滚翻效果的。）
构建导航栏列表
有几种不同的方法可以用来构建导航栏，但最常用的方法可能是将链接制作为无序列表。毕竟导航栏本质上说是一个链接列表，而且 <ul> 和 <li> 标签就是专为创建这类列表结构而设计的。在需要创建图A所展示的滚翻效果时，将导航栏标记为无序列表尤其有用，因为 XHTML 标准明确地允许在列表中嵌套列表。此外，无序列表标记一般情况下看起来比使用 <div> 或 <p> 标签做出来的东西更加清晰。
下面的代码片断展示了图A中所示的示例页面的 XHTML 代码。（注：这篇文章中的代码已经在 Windows 当前版本的 IE、Firefox、Netscape、Mozilla 和 Opera 中测试通过。底层技术也在 IE/Mac 和 Safari 中测试通过。）
<div
id="header">
<h1>Header</h1>
</div>
<div id="nav">
<ul>
<li><a href="#nowhere">List item
1</a></li>
<li><a href="#nowhere">List item
2</a></li>
<li><a href="#nowhere">List item
3</a></li>
<li class="category">List Category 1
<ul>
<li><a
href="#nowhere">Sub-List 1 item 1</a></li>
<li><a
href="#nowhere">Sub-List 1 item 2</a></li>
</ul>
</li>
<li><a href="#nowhere">List item
4</a></li>
<li class="category">List Category 2
<ul>
<li><a
href="#nowhere">Sub-List 2 item 1</a></li>
<li><a
href="#nowhere">Sub-List 2 item 2</a></li>
<li><a
href="#nowhere">Sub-List 2 item 3</a></li>
</ul>
</li>
<li><a href="#nowhere">List item
5</a></li>
</ul>
</div>
<div id="main">
<h2>Main Content</h2>
<p>It is the star...</p>
<p>...even to the edge of doom.</p>
</div>
导航栏包含在 ID 为 nav的一个 div 中，我们将使用这个 ID 来选择 div 中的列表标签，以求在控制其样式时不影响文档中其它地方的列表。导航栏本身是一个标准无序列表，其子列表嵌套在类别列表项中。
为了符合正确的嵌套规则，嵌套的 <ul> 标签是完全包含在父标签 <li></li> 中的。以前常见的做法是将嵌套的 <ul> 标签放在上一个列表项的 </li> 标签和下一个列表项的 <li> 标签之中，而不是放在父标签的 <li> 中。这种老样式的嵌套方法在目前的一些浏览器中或许可以正确显示，但是这种代码编写方法不符合当前的标准，而且在以后的浏览器版本中可能也无法正常显示。
标记中剩下唯一重要的事情就是应用到类别列表项（它们包含嵌套列表）的类(class)。我们将使用那个类来选择特殊格式的列表项。
