floatで横並びにする時、階段状になってしまったら

li {
}

li a{
float:left;
display:block;
width:80px;
height:30px;
}

↑これだと階段状にずれてしまうので、float:left; を li a から li にもってくる。

ボックスで考えると
floatさせたいボックス一つ一つにfloatをつけてやるんじゃなく、
そのfloatさせたいボックス達の外側のボックスに
floatを設定してあげる感じ。（←説明へたかっ）

つまり…

↓こうすると上手くいく…はず。

li {
float:left;
}

li a{
display:block;
width:80px;
height:30px;
}