对于html用css的润色

列表中分为有序（ol）和无序列表（ul），在这里面套用的都是<li>标签但是需要注意的是

ul标签与li标签之间不能插入其他的标签
<ul>
    <li>..........................</li>
    <li>..........................</li>
    <div>....................</div>   
</ul>

这一点是一些初学者经常犯下的错误。

然而，很多的时候系统给定的列表可能不能满足我们的网页要求，XHTML给我们提供了一些比较好用的标签：
也就是自定义列表标签：

<dl>
　　<dt>自定义列表标题</dt>
　　<dd>自定义列表内容</dd>
</dl>

对于列表的问题，我们常见的涉及到列表的还有二级导航，当然，二级导航其实很简单
下面，我给出代码，读者自己看看就能看懂了：

html的：

<ul id="nav">
<li> <a href="https://www.cnblogs.com#">首页</a> </li>
<li> <a href="https://www.cnblogs.com#">关于我们</a>
<ul>
<li> <a href="https://www.cnblogs.com#">我们的故事</a> </li>
<li> <a href="https://www.cnblogs.com#">我们的团队</a> </li>
</ul>
</li>
<li> <a href="https://www.cnblogs.com#">我们的服务</a>
<ul>
<li> <a href="https://www.cnblogs.com#">网页设计</a> </li>
<li> <a href="https://www.cnblogs.com#">页面制作</a> </li>
<li> <a href="https://www.cnblogs.com#">程序开发</a> </li>
</ul>
</li>
<li> <a href="https://www.cnblogs.com#">联系我们</a>
<ul>
<li> <a href="https://www.cnblogs.com#">团队成员</a> </li>
<li> <a href="https://www.cnblogs.com#">团队主力</a> </li>
</ul>
</li>

</li>
</ul>

css的代码

body{
font: normal 12px/1.5em "宋体";
}
ul{
width: 150px;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #cccccc;
}
#nav li{
position: relative;
}
#nav li ul{
display: none;
position: absolute;
left: 149px;
top: 0;
}
ul li a{
display: block;
height: 100%;
padding: 5px;
text-decoration: none;
color: #777777;
border: 1px solid #cccccc;
border-bottom: 0 none;
background: #ffffff;
}
#nav li:hover ul,#nav li.over ul{
display: block;
};