效果預覽：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>
效果是：
第二步：隱藏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定義為：
.hvtulli22 ul{list-style:none;}
說明：“.hvtulli22 ul”表示我要定義的樣式將作用在hvtulli的層里的ul標簽上。
現在的效果是沒有圓點了：
第三步：關鍵的浮動
這里是菜單變成橫向的關鍵，我們給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>
js,jquery,css,html5特效 http://www.cnblogs.com/roucheng/p/texiao.html
