div+CSS列表导航效果

div+CSS列表导航效果

                                                                                               
                    这是一个列表导航的效果，网站顶部的列表导航一般是 ul li；
这是div
  <ul id="nav">
    <li><a href="/index.asp">主页</a></li>
    <li><a href="/Sort/List_4.html">DIV+CSS教程</a></li>
    <li><a href="/Sort/List_5.html">常用代码</a></li>
    <li><a href="/Sort/List_6.html">水晶图标</a></li>
    <li><a href="/Sort/List_7.html">幻灯图片</a></li>
    <li><a href="/Sort/List_10.html">软件下载</a></li>
    <li><a href="/css2/">CSS2.0实用手册</a></li>
  </ul>

这是CSS
<style>
#nav li { float:left;}<!--让列表横向显示-->
#nav li a { <!--定义li的链接样式-->
olor:#000000; <!--链接颜色显示黑色-->
text-decoration:none; <!--无下划线-->
padding-top:4px; <!--内边距4像素，让导航文字水平居中显示-->
display:block; <!--定义li为块元素，显示成一个矩形-->
width:120px; <!--每个a链接的宽度是120像素-->
height:22px; <!--高22个像素-->
text-align:center; <!--导航文字垂直居中-->
background-color:#ececec; <!--a连接的背景颜色-->
margin-left:2px;<!--每个a链接的间距-->
}
#nav li a:hover {
background-color:#bbbbbb;<!--鼠标经过时背景颜色-->
color:#ffffff;}<!--文字颜色白色-->
</style>