用css3动画去做
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>00</title>
<style>
.xian{ width:50px height:1px background:#000000 margin-top:100px}
.xian{animation: myfirst 5s}
@keyframes myfirst
{
from {width: 50px}
to {width: 1000px}
}
</style>
</head>
<body>
<div class="xian"></div>
</body>
</html>
低版本浏览器不支持css3属性，用谷歌什么的高版本浏览器看。
我大概给你写了一下 看看是不是你要的效果<title>无标题文档</title>
<style type="text/css">
.top{ height:18pxborder-bottom:1px solid red}
li{ list-style-type:none
float:left
width:100px
margin-left:10px
background-color:#606060
text-align:center
font-size:12px
line-height:18px
}
li:hover{ list-style-type:none
float:left
width:100px
margin-left:10px
background-color:red
text-align:center
font-size:12px
line-height:18px}
.bottom{ border-left:1px solid redborder-right:1px solid redheight:20px}
</style>
</head>
<body>
<div class="top">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="bottom"></div>
</body>
效果会不断延伸。CSS中文名为层叠样式表，是一种用来表现标准通用标记语言的一个应用或标准通用标记语言的一个子集等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页个元素进行格式化。
