wrong z-index in IE7

by evpozdniakov

HTML

<script src="http://static.contentabc.com/xxxtalentcash/base/cdn/common/js/vendor/modernizr-2.6.1.min.js"></script>
<nav class="navigation">
    <h4>site navigation</h4>
    <ul class="level1">
        <li><a href="#">one</a></li>
        <li>
            <a href="#">two</a>
            <ul class="level2">
                <li><a href="#">Monday</a></li>
                <li><a href="#">Tuesday</a></li>
                <li><a href="#">Wednesday</a></li>
                <li><a href="#">Thursday</a></li>
                <li><a href="#">Friday</a></li>
                <li><a href="#">Saturday</a></li>
                <li><a href="#">Sunday</a></li>
            </ul>
        </li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
        <li><a href="#">five</a></li>
    </ul>
</nav>
<article>
    <h1>How to set z-index properly</h1>
    <div class="box">
        <div class="square left"></div>
        <div class="square right"></div>
    </div>
    <p>Hic quaero, si Hiempsali satis est cautum foedere et Recentoricus ager privatus est, quid attinuerit excipi; sin et foedus illud habet aliquam dubitationem et ager Recentoricus dicitur non numquam esse publicus, quem putet existimaturum duas causas in orbe terrarum repertas quibus gratis parceret. Num quisnam tam abstrusus usquam nummus videtur quem non architecti huiusce legis olfecerint? Provincias, civitates liberas, socios, amicos, reges denique exhauriunt, admovent manus vectigalibus populi Romani.</p>
</article>

CSS

body {padding: 20px;min-width: 760px;font-family: sans-serif;}
.navigation {padding: 10px;height: 40px; border: 2px solid #999;}
.navigation h4 {display: none;}
.navigation .level1 > li {float: left;position: relative;display: block;padding: 10px 20px;width: 100px;text-align: center;line-height: 20px;}
.navigation .level1 > li > a {display: block; background: #f3f3f3;text-decoration: none;color: black;font-weight: bold;text-transform: lowercase;}
.navigation .level2 {position: absolute;left: 0;top: 40px;z-index: 200;margin: 10px 0 0;padding: 10px;width: 115px;border: 2px solid #999;background: #fff;text-align: left;}
.navigation .level2 li {margin: 10px 0 0;background: #f3f3f3;}
.navigation .level2 li:first-child {margin-top: 0;}
.navigation .level2 a {display: block;padding: 2px 10px;background: #f3f3f3;text-decoration: none; color: #000;}
.box {position:relative;margin: 1em 0;height:175px;}
.box .square {position: absolute;z-index: 100;top: 0;width: 175px;height: 175px;opacity: .5}
.square.left {left: 0;background: red;}
.square.right {left: 200px;background: blue;}

article {margin: 1em 0 0;padding: 30px;border: 2px solid #999;}
article h1 {font: bold 2em serif;}

JavaScript

$(function(){
    if (!$.browser.msie || $.browser.version > 7) {
        alert('this demo is created for IE <= 7')
    }
})