HTML代码
利用列表实现导航。 以及渐变的效果 transition: all 0.2s;
利用定制列表实现栏目收缩功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单导航</title>
<style>
*{
margin:0px;
/*margin 外边距*/
padding:0px;
/*内边距 */
}
#u1{
width: 100%;
height:50px;
background-color: darkred;
list-style-type: none;
}
#u1>li{
width: 16%;
float: left;
/*水平居中*/
/*垂直居中*/
}
#u1>li>a{
display: block;
color: white;
width: 100%;
text-align: center;
vertical-align: middle;
line-height: 50px;
text-decoration: none;
font-family: 微软雅黑;
font-weight: bold;
/*字体加粗*/
}
/*鼠标碰到有反应*/
#u1>li>a:hover{
color: orangered;
font-size: 120%;
transition:all 0.5s ;
}
/*点击之后*/
#u1>li>a:active{
color: black;
}
#u1>li>a:visited{
color:black;
}
#u2{
height: 100%;
width:200px;
}
#u2>li{
height:40px;
background-color: red;
text-align: center;
vertical-align: middle;
line-height: 40px;
}
#u2>li>a{
display: block;
color: white;
text-decoration: none;
font-size: 18px;
font-weight: bold;
font-family: 微软雅黑;
width: 200px;
}
#u2>li>a:hover{
background-color: brown;
width:210px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
transition:all 0.5s ;
}
#dl1{
width: 200px;
background-color: brown;
}
#dl1>dt{
height:40px;
text-align: center;
font-family: 微软雅黑;
font-weight: bold;
color: black;
font-size: 150%;
}
#dl1>dd {
display: none;
}
#dl1>dd>ul>li{
color: white;
height:40px;
line-height: 40px;
background-color: orange;
}
#dl1>dt:hover{
background-color: blue ;
transition: all 0.5s;
}
#dl1>dt:hover+dd{
display:block;
}
</style>
</head>
<body>
<ul id="u1">
<li><a href="1">数学</a></li>
<li><a href="2">语文</a></li>
<li><a href="3">英语</a></li>
<li><a href="4">政治</a></li>
<li><a href="5">历史</a></li>
<li><a href="6">化学</a></li>
</ul>
<ul id="u2">
<li><a href="1">数学</a></li>
<li><a href="2">语文</a></li>
<li><a href="3">英语</a></li>
<li><a href="4">政治</a></li>
<li><a href="5">历史</a></li>
<li><a href="6">化学</a></li>
</ul>
<dl id="dl1">
<dt>数学</dt>
<dd >
<ul>
<li>应用数学</li>
<li>高等数学</li>
</ul>
</dd>
<dt>英语</dt>
<dd>
<ul>
<li>口语</li>
<li>听力</li>
</ul></dd>
</dl>
</body>
</html>
原文：http://www.cnblogs.com/ljian41/p/6690204.html