創建CSS樣式文本導航條的最簡單解決方法也許就是把所有的鏈接都放在一行文本里，這種方法看起來很合理也很直觀。但問題在於把所有的鏈接都放在一行文本里就很難控制鏈接之間以及前後的空白。所以，爲了避免所有的鏈接都擠在一起，你最後通常都不得不插入一些東西或者非換行的空白字符作爲分隔，讓這些文字分離開來，不至於混在一起。但這樣有意義嗎？
現在我們正常的做法是應用ul、li標籤把鏈接作爲無序列表（unordered list）來標識。再應用CSS樣式對其進行控制，按我們預想的形式在容器中顯示出來。對導航條使用無序列表似乎是不符合直觀感受的，因爲我們習慣於把無序列表作爲一個豎着推起來的列表項目，每個前面都放着一個列表預設標記。這似乎不符合導航條水平方向的習慣。但作爲獨立列表項目集合的列表邏輯結構能夠適用於導航條裏的鏈接；而CSS的規則讓你能夠強制取代列表項目缺省的表現形式，以消除它們並安排列表項在容器內按水平方向排列，而不是從上而下的規則。現在讓我們來看看實例，根據無序列表創建CSS樣式和XHTML標籤的橫向導航菜單。
我們看看下面的xhtml代碼：
Example Source Code[<div id="nav">
<ul>
<li><a href="http://www.52css.com/">HomePage</a></li>
<li><a href="http://www.52css.com/">Div+CSS教程</a></li>
<li><a href="http://www.52css.com/">CSS佈局實例</a></li>
<li><a href="http://www.52css.com/">CSS2.0教程 </a></li>
<li><a href="http://www.52css.com/">CSS在線手冊</a></li>
<li><a href="http://www.52css.com/">Web標準</a></li>
<li><a href="http://www.52css.com/">XHTML教程</a></li>
</ul>
</div>
<ul>
<li><a href="http://www.52css.com/">HomePage</a></li>
<li><a href="http://www.52css.com/">Div+CSS教程</a></li>
<li><a href="http://www.52css.com/">CSS佈局實例</a></li>
<li><a href="http://www.52css.com/">CSS2.0教程 </a></li>
<li><a href="http://www.52css.com/">CSS在線手冊</a></li>
<li><a href="http://www.52css.com/">Web標準</a></li>
<li><a href="http://www.52css.com/">XHTML教程</a></li>
</ul>
</div>
我們再看看關於這段xhtml的CSS代碼：
Example Source Code#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
我們來看看上面的代碼的運行效果：
Source Code to Run
或許你並不能完全理解這些代碼都是什麼意義，都用來控制什麼，達到什麼效果。
下面我們來解析上面的代碼：
xhtml代碼首先定義了一個容器div id="nav"。這個容器用來放置這個無序列表橫向導航菜單的內容，但也有人認爲這個容器是多餘的，直接定義ul id="nav"就可以了。我們不建議你這樣做，要知道我們的站點是可擴展的，我們要爲將來的擴展留有足夠的餘地，如果我們的導航樣式設計的更加複雜，僅有的ul是不能滿足需要的。我們定義這樣的容器也更符合我們編寫代碼的習慣。
#nav定義了窗口的寬高及背景顏色。#nav ul包含有margin和padding聲明，字體及顏色聲明。line-height: 30px;是非常重要的定義，如果取消掉行高的定義，我們的鏈接文字垂直居中就可能受到影響。white-space: nowrap;或許大家並不能理解有什麼作用，它定義了強制在同一行內顯示所有文本，直到文本結束或者遭遇br對象。
#nav li中的list-style-type: none;去除了列表項所使用的預設標記。使其更象是純文本，而沒有列表標記。display: inline;聲明則能夠讓列表項目在頁面上從左向右浮動，而不會讓每個項目顯示在單獨的行裏而從上至下的排列。這兩項聲明是我們實現無序列表橫向導航菜單的關鍵。
#nav li a和#nav li a:hover定義了鏈接的樣式。其中的內容就不作深入了，唯一要講的就是：padding: 7px 10px;它是用來控制鏈接文字之間的空白間隔的，你可以試着改變數值試試看。
至此，無序列表創建css橫向導航菜單的工作就結束了.