几个导航栏也算对学过知识的回顾，总有新的收获，下面是学习过程中敲的代码：
下面css代码使其水平导航：
ul{ list-style-type: none; } a{ display: block;/*设为block修改其样式，而不是修改li标签*/ text-decoration:none; background-color:#ccc; height: 30px; line-height: 30px; width: 100px; margin-bottom: 1px; text-align:center; } li{ float:left; } a:hover{ background-color:#f60; color:#fff; } 下面再次改进为伸缩效果： ul{ list-style-type: none; height:30px; border-bottom:3px solid #f60; margin:0 auto; width: 800px; padding-left: 200px; } a{ display: block;/*设为block修改其样式，而不是修改li标签*/ text-decoration:none; background-color:#ccc; height: 30px; line-height: 30px; width: 100px; margin-bottom: 1px; text-align:center; border-radius:10px 10px 0 0; } li{ float:left; width: 100px; margin: 0 auto; } a:hover{ background-color:#f60; color:#fff; height:40px; margin-top:-10px; line-height: 40px; }改进后效果如下： 
下面用js改进，实现鼠标放上去变宽效果：
效果：
