導航在網站中起着舉足輕重的作用，常見的導航形式主要有橫向導航、縱向導航和下拉式導航等三種形式。
傳統的導航是表格式佈局，不僅代碼量大，後期維護起來也不方便，而且也沒有實現表現與內容的分離，顯然不符合web2.0的標準。下面我們重點來看css是如何實現橫向導航的。
先看代碼：
程序代碼
<ul id="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">心路</a></li>
<li><a href="#">歷程</a></li>
<li><a href="#">設計</a></li>
<li><a href="#">代碼</a></li>
<li><a href="#">優化</a></li>
</ul>這裏我們引入了一個新的元素ul。ul是CSS中使用相當廣泛的一種元素，主要用來描述列表型內容。每一個<ul></ul>相當於一個列表塊，塊中的每一條列表數據用<li></li>來描述，下圖是一個不加樣式的ul實現的樣式效果：
如圖：導航對比
顯然，ul默認加上了圓點序號，而且自上而下排列。實際上導航可以理解為導航列表，每一個列表數據就可以看做是一個頻道,當然也可以用二層嵌套div來實現導航代碼結構，但相對於ul來説，div顯然過於複雜，而且我們之前也説過，div主要是用來大範圍的樣式佈局。而類似於導航的塊狀型區域則主要交給ul來處理。
下面我們來看為其實現樣式的css代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
ul{list-style-type:none;} /*去除列表項前端的項目符號*/
ul li{float:left;} /*使列表項不再遵循默認的自上而下樣式，而類似於div的向左浮動屬性，使右側對象緊貼左側最終形成橫向排列樣式*/
ul li a{display:block;/*塊狀顯示，在第三節講div的時候曾提過，此處的作用就是把a鏈接對象由一段文本改為塊狀對象，使其具備div的一些特性，從而實現內外邊距，邊框背景等屬性*/
margin-left:10px; /*左外邊距*/
width:60px; /*塊寬度*/
height:16px; /*塊高度*/
padding-top:4px; /*上內邊距*/
text-align:center; /*文本距中顯示*/
background-color:#cecece; /*塊背景色*/
color:#009900; /*字體顏色*/
font-size:12px; /*字體大小*/
text-decoration:none;} /*字體裝飾無下劃線*/
ul li a:hover{color:#fff; /*偽類：指向鏈接時的字體顏色*/
background-color:#33ccff; /*偽類：指向鏈接時的背景色*/
text-decoration:underline; /*偽類：指向鏈接時的字體裝飾*/
}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">心路</a></li>
<li><a href="#">歷程</a></li>
<li><a href="#">設計</a></li>
<li><a href="#">代碼</a></li>
<li><a href="#">優化</a></li>
</ul>
</div>
</body>
</html>特別説明：
1、以下兩句都使用了包含選擇符。
ul li{}
ul li a{}
2、用ul實現的橫向導航顯然用了極少的代碼量實現了豐富的效果，這是表格所不及的。而且在後期增刪頻道更為方便。
下面我們對代碼修改以實現如下樣式：
如圖：導航示例
因為有圖片，所以要下載示例文件。
程序代碼
特別説明：
此處順便講解了如何應用了背景圖片的絕對定位屬性，把原本兩個不同色調的圖片合二為一，然後定位顯示。從而豐富導航的樣式。當然背景屬性此處不做重點，我們會在以後的教程中詳細講解。
通過這兩個示例的練習，想必大家都能做出漂亮的橫向導航了吧。下一節我們將來製作縱向導航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>橫向分類導航-css系列教程-超級寶貝-http://www.chaojibaby.com</title>
<style type="text/css">
<!--
body{margin:0px;}
#header{margin:0px auto;width:780px;height:90px;background-color:#000;padding:0px;}
#header img{position:relative;top:20px;left:30px;} /*相對定位，位置根據前一對象進行偏移*/
#nav{
list-style:none;
position:relative; /*相對定位，位置根據前一對象進行偏移*/
top:37px;
left:300px;
width:500px;/*此處須設定寬度，否則在IE與Firefox裏不一致且不正常*/
}
#nav li{float:left;}
#nav li a{display:block;
margin-left:10px;
width:69px;
height:16px;
padding-top:4px;
text-align:center;
background-image:url(nav.gif);
background-position:0px -22px; /*背景絕對定位，只顯示背景圖片的下部分*/
color:#009900;
font-size:12px;
letter-spacing :10;
text-decoration:none;}
#nav li a:hover{color:#fff;
background-image:url(nav.gif);
background-position:0px 0px;/*背景絕對定位，只顯示背景圖片的上部分,此代碼不能省略，因為上面曾指定了背景樣式，幫在此處覆蓋*/
text-decoration:underline;
}
-->
</style>
</head>
<body>
<div id="header">
<a href="http://www.chaojibaby.com"><img src="css_desiger.gif" alt="超級寶貝" border="0" /></a>
<div id="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">心路</a></li>
<li><a href="#">歷程</a></li>
<li><a href="#">設計</a></li>
<li><a href="#">代碼</a></li>
<li><a href="#">優化</a></li>
</div>
</div>
</body>
</html>
