I have this nav that uses addClass('hover') when the mouse is rolled over an item. This works fine except in IE7 when the addClass function is called every element with float:left stops floating and the page totally loses its structure.

This is my JS:

_this.position_sub_menus = function(){
  $('#header #nav > ul > li').mouseenter(
    function(e){
     pos = $(this).offset();
     height = $(this).height();
     lvl2 = '#' + $(this).attr('id') + '-submenu'; 
      if( $(this).position().left > ($('#nav').width()/2)){
       pos.left = pos.left - $(lvl2).width() + $(this).width();
      }
     $(this).addClass('hover');
     $(lvl2).show();
     $(lvl2).css( { 'left' : (pos.left - 12) + 'px', 'top' : pos.top + height + 'px'});
    }
   );

This is the CSS of the of the elements that break:

display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;

It's CSS from the 960 grid system.

When I comment out the $(this).addClass('hover'); line the floated elements dont break.

Is anyone familiar with this IE7 problem?

Thanks guys