擁有易用的導航條對於任何網站都很重要，通過 CSS，你能夠把乏味的 HTML 菜單轉換爲漂亮的導航欄。
首先導航欄需要標準的 HTML 作爲基礎。導航欄基本上是一個鏈接列表，因此使用 <ul> 和 <li> 元素是非常合適的，代碼如下：
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>現在去掉圓點和外邊距：
ul
{
list-style-type:none;
margin:0;
padding:0;
}例子解釋：
list-style-type:none - 刪除圓點。導航欄不需要列表項標記。把外邊距和內邊距設置爲 0 可以去除瀏覽器的默認設定。
以上例子中的代碼是用在垂直、水平導航欄中的標準代碼。
垂直導航欄：
如需構建垂直導航欄，我們只需要定義 <a> 元素的樣式，除了上面的代碼之外：
實例
a
{
display:block;
width:60px;
}例子解釋：
display:block - 把鏈接顯示爲塊元素可使整個鏈接區域可點擊（不僅僅是文本），同時也允許我們規定寬度。
width:60px - 塊元素默認佔用全部可用寬度。我們需要規定 60 像素的寬度。
另附完整的垂直導航欄，如下：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
</style>
</head>
<body>
<ul>
<li><a href="the url you want to link">Home</a></li>
<li><a href="url">News</a></li>
<li><a href="url">Contact</a></li>
<li><a href="url">About</a></li>
</ul>
</body>
</html>
水平導航欄:
有兩種創建水平導航欄的方法。使用行內或浮動列表項。
兩種方法都不錯，但是如果你希望鏈接擁有相同的尺寸，就必須使用浮動方法。
行內列表項
除了上面的“標準”代碼，構建水平導航欄的方法之一是將 <li> 元素規定爲行內元素：
li
{
display:inline;
}解釋：display:inline; <li> 元素是塊元素。在這裏，我們去除了每個列表項前後的換行，以便讓它們在一行中顯示。
完整的水平導航欄代碼：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="url">Home</a></li>
<li><a href="url">News</a></li>
<li><a href="url">Contact</a></li>
<li><a href="url">About</a></li>
</ul>
</body>
</html>
對列表項進行浮動,
在上面的例子中，鏈接的寬度是不同的。
爲了讓所有鏈接擁有相等的寬度，浮動 <li> 元素並規定 <a> 元素的寬度：
li
{
float:left;
}
a
{
display:block;
width:60px;
}例子解釋：
float:left - 使用 float 來把塊元素滑向彼此。
display:block - 把鏈接顯示爲塊元素可使整個鏈接區域可點擊（不僅僅是文本），同時也允許我們規定寬度。
width:60px - 由於塊元素默認佔用全部可用寬度，鏈接無法滑動至彼此相鄰。我們需要規定 60 像素的寬度。
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
</style>
</head>
<body>
<ul>
<li><a href="url">Home</a></li>
<li><a href="url">News</a></li>
<li><a href="url">Contact</a></li>
<li><a href="url">About</a></li>
</ul>
</body>
</html>