floating link hover background problem

on my navigation i have links then i have a link that is floated to the right. and when i hover over the right link i dont want anything to happen when i hover..but it adds a background right beside the last link on the left, because it's floated. how do i make no background appear on hover for the floated link? ive tried making a class then on :hover make background none but nothing changes.

i have a jsfiddle because its probably confusing lol

htt开发者_高级运维p://jsfiddle.net/r3bbm/

edit: also this doesnt happen in chrome, any other browser it does

Well, you are floating the image inside the link, not the <a> tag. Try putting the floatr class on the <a> tag instead. Then make .floatr:hover{background:none;}