第一步：建立乙個無序列表
我們先建立乙個無序列表，來建立選單的結構。**是：
第二步：隱藏li的預設樣式
因為看起來不是很好看，選單通常都不需要li預設的圓點，我們給ul定義乙個樣式來消除這些圓點。
當然，為了更好的控制整個選單，我們把選單放在乙個div裡。頁面**變成：
css定義為：
.test ul
說明：「.test ul」表示我要定義的樣式將作用在test的層裡的ul標籤上。
現在的效果是沒有圓點了：
第三步：關鍵的浮動
這裡是選單變成橫向的關鍵，我們給li元素加上乙個「float:left;」屬性，讓每個li浮動在前面乙個li的左面。
css定義為：
.test li
選單變橫向了。就這麼簡單！下面需要做的就是優化細節了。
第四步：調整寬度
選單都擠在一起不好看怎麼辦？我們來調節li的寬度。
在css中新增定義width:100px指定乙個li的寬度是100px，當然你可以根據你的需要調整數值：
.test li
效果是：
如果我們同時定義外面div的寬度，li就會根據div的寬度自動換行，例如定義了div寬350px，6個li的總寬度是600px，一行排不下就自動變成兩行：
.test
第五步：設定基本鏈結效果
接下來，我們通過css來設定鏈結的樣式，分別定義:link、:visited、:hover的狀態
.test a:link
.test a:visited
.test a:hover
第六步：將鏈結以塊級元素顯示
有朋友問，選單鏈結的背景色為什麼沒有填滿整個li的寬度？恩，解決的方法很簡單，在a的樣式定義中增加display:block，使鏈結以塊級元素顯示。
同時我們微調了如下細節：
用text-align:center將選單文字居中；
用height:30px增加背景的高度；
用margin-left:3px使每個選單之間空3px距離；
用line-height:30px;定義行高，使鏈結文字縱向居中；
css定義象這樣：
.test a
.test li
這樣就漂亮多了吧。
第七步：定義背景
我們通常都會在每個鏈結前加乙個小圖示，這樣導航更清楚。css是採用定義li的背景來實現的：
.test a:link
.test a:hover
說明：「background:url(arrow_off.gif) #ccc no-repeat 5px 12px;」這句**是乙個css縮寫，表示背景是arrow_off.gif；背景顏色是#ccc；背景不重複"no-repeat"，背景的位置是左邊距5px、上邊距12px；
預設狀態下，圖示為arrow.off.gif，當滑鼠移動到鏈結上，圖示變為arrow_on.gif
效果變成：
現在css的完整**是：
.test ul
.test li
.test a
.test a:link
.test a:visited
.test a:hover
頁面的完整**是：
好了，主要步驟就是這7步，立刻拷貝和修改**試試，你也可以用css做橫向選單了！
ul橫向排列，ul下拉框
最近又開始做網頁，以前做網頁總是自己乙個人想啊想啊，各種效果都是自己乙個人用各種不科學的方法來實現的。以前做的下拉框是做jquery的效果外加自己的js控制。不過嘛，這次我做網頁是參考別人 的源 的，所謂學習就是這麼一回事，雖然看起來很費勁。現在我在做的主要是頂部的那個超連結選單，很多 都有，主要是...
css如何實現ul和li橫向排列
因為li是塊級元素，預設佔一行的，要想實現橫向排列，一般通過以下兩個方法 float left這樣設定有乙個問題，li浮動以後則脫離了文字流，即不佔位置，如果它的父級元素有具體的樣式且沒有固定寬高，建議父元素清除浮動，或者設定固定寬高。display inline block即把li變為行內元素且可...
CSS的ul和li實現橫向排列和去掉li的點
今天做網頁是老是不懂怎麼實現ul的橫向排列和去掉li那個煩人的點，現在找到方法了，做個筆記 複製 如下 ul ul li 順便拓展一下li的list style 複製 如下 ul 程式設計客棧 ul ol ol 再寫個今天看到的東西，是關於dl,dt,dd的，其實就是類似於子類的，我比較少見到各個網...