为什么我这段代码实现不了最开始的伸长JS动画啊，总是提示错误 Cannot set property 'width' of undefined"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>横向菜单</title>
		<style>
			*{margin:0;padding:0}
			ul{
				list-style: none;
				height: 50px;
				border-bottom: solid 5px #F60;
			}
			li{
				float:left;
				margin-top:20px;
			}
			a{
				text-decoration: none;
				display: block;
				height:30px;
				width: 120px;
				line-height: 30px;
				margin-bottom: 1px;
				text-align: center;
				background: lightgrey;
			}
			.on,a:hover{
				color:white;
				background: orangered;
				height:30px;
				width:120px;
				line-height:30px;
			}
		</style>
		<script>
			window.onload=function(){
				var A=document.getElementsByTagName('a');
				for(var i=0;i<A.length;i++)
				{
					var This=this;
					A[i].onmouseover=function(){
						setInterval(function(){
							This.style.width=This.offsetWidth+8+"px";
						},30);
					}
				}
			}
		</script>
	</head>
	<body>
		<ul>
			<li><a class="on" href="#">首        页</a></li>
			<li><a href="#">新闻快讯</a></li>
			<li><a href="#">产品展示</a></li>
			<li><a href="#">售后服务</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</body>
</html>