效果預覽：http://hovertree.com/texiao/css/
如何用CSS制作橫向菜單 讓ul li橫向排列及圓點處理
我們先建立一個無序列表，來建立菜單的結構。代碼是：
<ul>
<li><a href="http://hovertree.com/">首頁</a></li>
<li><a href="http://hovertree.com/map/">網站地圖</a></li>
<li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li>
<li><a href="http://hovertree.com/menu/texiao/">特效</a></li>
<li><a href="http://cms.hovertree.com/">CMS在線預覽</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery圖片列表鼠標經過遮罩顯示文字</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li>
</ul>
效果是：
- 首頁
- 網站地圖
- HoverTreeCMS
- 特效
- CMS在線預覽
- jQuery圖片列表鼠標經過遮罩顯示文字
- 原文
第二步：隱藏li的默認樣式，去掉圓點
因為看起來不是很好看，菜單通常都不需要li默認的圓點，我們給UL定義一個樣式來消除這些圓點。
當然，為了更好的控制整個菜單，我們把菜單放在一個div裡。頁面代碼變成：
<style>.hvtulli22 ul{list-style:none;}</style>
<div class="hvtulli22"> <ul>
<li><a href="http://hovertree.com/">首頁</a></li>
<li><a href="http://hovertree.com/map/">網站地圖</a></li>
<li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li>
<li><a href="http://hovertree.com/menu/texiao/">特效</a></li>
<li><a href="http://cms.hovertree.com/">CMS在線預覽</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery圖片列表鼠標經過遮罩顯示文字</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li>
</ul></div>
CSS定義為：
.hvtulli ul{list-style:none;}
說明：“.hvtulli ul”表示我要定義的樣式將作用在hvtulli的層裡的ul標簽上。
現在的效果是沒有圓點了：
- 首頁
- 網站地圖
- HoverTreeCMS
- 特效
- CMS在線預覽
- jQuery圖片列表鼠標經過遮罩顯示文字
- 原文
第三步：關鍵的浮動
這裡是菜單變成橫向的關鍵，我們給li元素加上一個“float:left;”屬性，讓每個li浮動在前面一個li的左面，margin-left:10px 使li之間間隔10像素。
CSS定義為：
.hvtulli li{float:left;margin-left:10px}
效果是：http://hovertree.com/texiao/css/
看，菜單變橫向了。就這麼簡單！下面需要做的就是優化細節了。
HTML文件代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ul中li橫排，除去li前的圓點，li之間間隔-何問起</title><base target="_blank" />
<meta charset="utf-8" />
<style>.hvtulli ul{list-style:none;} .hvtulli li{float:left;margin-left:10px}</style>
</head>
<body>
<div><h2>何問起</h2>
<h3>ul中li橫排，除去li前的圓點，li之間間隔</h3>
</div>
<div class="hvtulli">
<ul>
<li><a href="http://hovertree.com/">首頁</a></li>
<li><a href="http://hovertree.com/map/">網站地圖</a></li>
<li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li>
<li><a href="http://hovertree.com/menu/texiao/">特效</a></li>
<li><a href="http://cms.hovertree.com/">CMS在線預覽</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery圖片列表鼠標經過遮罩顯示文字</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li>
</ul>
</div>
</body>
</html>