i have a basic website header and inside i have logo floated to the left and menu floated to the right.

Check out this js fiddle 
<http://jsfiddle.net/RjHxR/6/>

Menu is horizontal, so i applied `float:left` on `#main_menu li` items. But, i want to make the menu responsive too, so i applied `float: none` on `#main_menu li` items on certain screen sizes, because i want to have a standard vertical menu on those screen sizes (see in js fiddle css). When i resize Google Chrome to that resolution it appears OK. But when i try to resize the browser back to higher resolution, `#main_menu li` items remain on `float: none`, even though `float: left` is specified for that resolution! And it happens only in Chrome. Try it yourself on the jsfiddle. 

Any help is appreciated.