一步一步的指导
无论您的导航菜单是横跨顶部的水平行还是侧面的垂直行，它仍然只是一个列表。 在设计网页导航时，通常很容易忘记导航菜单只是一组光荣的链接。 但是，如果您使用XHTML + CSS编程导航，则可以创建一个小的可下载菜单（XHTML）并且易于自定义（CSS）。
入门
要开始设计导航列表，您需要使用列表。
它可能是一个标准的无序列表，已被确定为导航：
如果仔细观察HTML，您会注意到“主页”链接也有一个您所在的ID。 这将允许您创建一个菜单来标识读者的当前位置。 即使您现在不打算在您的网站上使用这种类型的视觉提示，也可以包含该信息。 如果您决定稍后添加提示，则您的网站准备工作将会减少。
没有任何CSS样式 ，这个XHTML菜单看起来像一个标准的无序列表。 有子弹和列表项目稍微缩进。 因为我使用占位符链接 ，所以大多数浏览器都不会将链接显示为可点击（带下划线和蓝色）。 如果您将上述HTML粘贴到网页中，则导航将如下所示：
- 家
- 制品
- 服务
- 联系我们
这很无聊，看起来不像菜单。 但只有少数CSS样式添加到列表中，您可以创建一个让您感到自豪的菜单。
垂直导航菜单
垂直导航菜单非常易于编写，因为它以与普通列表相同的方式显示：向上和向下。
列表项显示在页面的垂直向下。
当我在设计菜单时，我喜欢从外面开始工作。通过这个，我的意思是我首先设计ul＃导航，然后移动到li元素，然后移动到链接等。因此，对于这个菜单，首先你定义菜单的宽度。 这将确保即使菜单项很长，它们也不会将布局的其余部分压过或导致水平滚动。
ul＃navigation {width：12em; }
一旦我设定了宽度，我可以玩列表项目。 这使我可以设置（摆脱子弹），背景颜色，边框，文本对齐和边距。
ul＃navigation li {
list-style：none;
背景颜色：＃039;
border-top：solid 1px＃039;
text-align：left;
保证金：0;
}
一旦你设置了列表项目的基础知识，就可以开始播放菜单在链接区域中的外观了。 第一种方式是UL＃导航LI A，然后是A：链接，A：访问，A：悬停和A：主动（如果你想要的话）。 对于链接，我喜欢使链接成为一个块元素（而不是默认的内联）。 这迫使他们占据LI的整个空间 - 他们更像一个段落，这使得他们更容易作为菜单按钮。另一件事我总是做的是删除下划线（text-decoration：none;），因为这使得按钮看起来更像我的按钮。
但是，当然，你的设计可能会有所不同。
ul＃navigation li a {
显示：块;
文字修饰：无;
填充：.25em;
border-bottom：solid 1px＃39f;
border-right：solid 1px＃39f;
}
请注意，使用display：block; 在链接上设置，菜单项的整个框是可点击的，而不仅仅是字母。 这对可用性也很好。 如果您希望它们与默认的蓝色，红色和紫色不同，请确保设置链接颜色 （链接，访问，悬停和活动）。
a：link，a：visited {color：#fff; }
a：hover，a：active {color：＃000; }
我也喜欢通过改变背景颜色来让悬停状态更受关注。
a：hover {background-color：#fff; }
如果您想了解更多垂直菜单的示例，请参阅下面的列表。
- 一个风格化的垂直菜单
- 基本的垂直菜单模板
- 与你在一起的风格垂直菜单
- 与你在一起的基本垂直菜单模板
水平导航菜单
创建水平导航菜单比垂直导航菜单稍微困难一些，因为您必须抵消HTML列表倾向于垂直显示的事实。 与水平菜单一样，首先创建您的导航菜单列表 ：
要创建水平菜单，请按照垂直菜单中的操作。 从外面开始工作。因为我想让我的导航在左下角开始，所以我将它设置为0左边距和填充，然后将它浮动到左边。 你还应该习惯于设置宽度，这样你的菜单就不会占用比你想要的更多或更少的空间。 对于水平菜单，这通常是设计的整个宽度。 我还为整个列表添加了背景颜色 ，以便于阅读。
ul＃navigation {
向左飘浮;
保证金：0;
填充：0;
宽度：100％;
背景颜色：＃039;
}
但是水平导航菜单的秘密在列表项中。 列表项通常是块元素，这意味着它们将在每个元素之前和之后放置一个换行符。 通过将显示从块切换到内联，您可以强制列表元素水平排列。
ul＃navigation li {display：inline; }
我对链接进行了精确处理，就像我在垂直导航菜单中处理它们一样，使用相同的颜色和文字装饰。 当他们悬停时，我添加了一个顶部边框来描述这些按钮。 我删除的唯一的东西是显示：块; 因为这会将换行符重新放入并破坏水平菜单。
ul＃navigation li a {
文字修饰：无;
填充：.25em 1em;
border-bottom：solid 1px＃39f;
border-top：solid 1px＃39f;
border-right：solid 1px＃39f;
}
a：link，a：visited {color：#fff; }
ul＃navigation li a：hover {
background-color：#fff;
颜色：＃000;
}
你在这里位置信息
HTML的另一个方面是youarehere标识符。 如果您想修改菜单以指示用户的当前位置，只需使用此ID来定义不同的背景颜色或其他样式。 将该ID属性移动到其他页面上正确的菜单项，以便当前页面始终高亮显示。
ul＃navigation li＃youarehere a {background-color：＃09f; }
如果您将这些样式放在您的页面上，您可以创建一个水平或垂直菜单栏，可以与您的网站一起使用，但可以快速下载，并且在将来可以非常容易地进行更新。 使用XHTML + CSS可将您的列表变成一个非常强大的设计工具。
如果您想了解更多水平菜单的示例，请参阅以下内容。
- 一个风格化的水平菜单
- 基本的水平菜单模板
- 与你在一起的风格水平菜单
- 一个基本的水平菜单模板与你在这里