一步一步的指導
無論您的導航菜單是橫跨頂部的水平行還是側面的垂直行，它仍然只是一個列表。 在設計網頁導航時，通常很容易忘記導航菜單只是一組光榮的鏈接。 但是，如果您使用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可將您的列表變成一個非常強大的設計工具。
如果您想了解更多水平菜單的示例，請參閱以下內容。
- 一個風格化的水平菜單
- 基本的水平菜單模板
- 與你在一起的風格水平菜單
- 一個基本的水平菜單模板與你在這裡