CSS制作导航鼠标经过后面文字会跟着动怎么解决

我做了一个简易的CSS导航，比如说一排有五个字，我鼠标移动到第一个字的时候后面四个字跟着会动，我想要后面的不动那怎么写呢，
我的代码如下：CSS：
ul{
width:950px;
height:40px;
font-size:12pt:
list-style-type:none;
margin:0;
padding:0;
background-color:#e6e6e6;
background-position:left top;
}
ul li
{
display:block;
float-left;
margin:0 0 0 115px;
}

ul li a{
height:43px;
clolr:red;
text-decoration:none;
display:block;
float:left;
padding-top:8px;
padding-right:15px;
padding-bottom:5px;
padding-left:15px;}

ul li a:hover{
font-size:12pt;
background-color:#00ffcc;
width:50px;
height:50px;}

HTML的如下：

ds
ds1
ds2
ds3
ds4
ds5

我看你的代码实在晕，错误百出，
float:left;写成了float-left;
color:red;写成了clolr:red;
href=#"少写了半个引号
结束标签没有写
写成了

然后说一下为什么你后面的字为什么会动，因为你的a标签和a标签经过的宽高不一样，当然会动了。比如，你想想，本来a宽50px，你鼠标指上去是宽100px了，它后面当然会往右移啦。所以，你只要保持a和a:hover宽高一致就不会动来动去了。
例如去掉a:hover里的width:50px;height:50px;

a:hover，a表示什么？超链接标记。hover呢？就是high+over，所以a:hover就表示鼠标移到超链接上面的状态，比如a：hover{ color：#f00；}鼠标经过超链接时字体变为红色，它是一个伪类，是选择符的一种。类似的还有a:link，a:active，a:visted，分别表示链接没被激活，被激活（刚按下鼠标），和已经被访问过后的状态。比如说字体颜色的变化，有无下划线删除线等等的样式。