用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>