用li標簽來做導航菜單是很多網站都采用的方式，但是對於DIV+CSS新手來說，用li標簽來實現網頁的導航菜單並不容易，它涉及到浮動及內聯化和清除浮動這方面。
在這里，我寫了一個實例，新手朋友可以參考一下它。
這個實例的幾個要點在於：
1、li標簽的CSS需要將float屬性設置為left(這里就成了左浮動); display屬性設置為inline（這里是將li標簽設置為內聯，它默認是塊化的）;
2、需要將li標簽中的a標簽的css中的display屬性設置為block（塊化）;
3、需要在ul標簽后加上<div style="clear:both"></div>，這是用於清除前面的浮動，如果不清除浮動的話，那后面的標簽有可能會變形。
實例代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用li標簽做網頁導航菜單</title> <style type="text/css"> * { margin:0; padding:0; } #nav{ width:960px; margin:80px auto 0px auto; background:#04A63E; color:#D8F0CE;} #nav li{float:left; display:inline;} #nav li a{ display:block; color:#5CD67B; padding:10px 15px; font-size:13px; font-weight:bold; text-decoration:none;} #nav li a:hover{ background:#5CD67B; color:#FFF;} </style> </head> <body> <div id="nav"> <ul> <li><a href="http://www.yanshuan.com/">店鋪目錄網首頁</a></li> <li><a href="http://www.yanshuan.com/single/nvzhuangpinpai.html">品牌女裝</a></li> <li><a href="http://www.yanshuan.com/single/nanzhuangpinpai.html">品牌男裝</a></li> <li><a href="http://www.yanshuan.com/single/tongzhuangpinpai.html">精品童裝</a></li> <li><a href="http://www.yanshuan.com/single/zhonglaonianfuzhuangpinpai.html">中老年服裝</a></li> <li><a href="http://www.yanshuan.com/single/damanvzhuang.html">大碼女裝</a></li> <li><a href="http://www.yanshuan.com/single/nvxiepinpai.html">女鞋品牌</a></li> <li><a href="http://www.yanshuan.com/single/nanxiepinpai.html">男鞋品牌</a></li> <li><a href="http://www.yanshuan.com/single/neiyipinpai.html">品牌內衣</a></li> <li><a href="http://www.yanshuan.com/single/jiajupinpai.html">品牌家具</a></li> </ul> <div style="clear:both"></div> </div> </body> </html>