css / jQuery overlay div over the multiple li ie7

Question

Here is the code: http://jsfiddle.net/pfaUZ/5/

When I click li the pop div showing fully overlaying two li (exmpl: li width 100px, pop width 200px;) but if u test in ie7 its not working:

see:

Answer 1

See: http://jsfiddle.net/thirtydot/pfaUZ/11/

You can fix this IE7 bug by ensuring that only the "active" li has position: relative:

$('li').click(function() {
    $('.pop').hide();
    $(this).find('.pop').show();

    $('li').css('position', 'static');
    $(this).css('position', 'relative');
});

I also changed to .hide() and .show(). Those methods are equivalent to what you were using.

There might be a pure CSS fix, which would be more desirable, but I can't find it.

Answer 2

Try like that

$('li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

and use active css instead of working with 2 elems. preview here: http://jsfiddle.net/acrashik/pfaUZ/9/

Answer 3

In your .pop class simply set the width to 100, it solves the issue:

.pop {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 100px; /* <-- this one */
    background: #333;
    z-index: 9999;
}