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