Why i can't click subnav when under IE7?

HTML & CSS
1 

<html>
<head>
 <title>test</title>
 <link type="text/css" rel="stylesheet" href="http://www.idcvendor.com/sites/default/files/css/css_5XB5aQOGzDUVxnwtHDXg0AJDjmjZbe2Sh1K2BEkR5cM.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://www.idcvendor.com/sites/default/files/css/css_l41xogbYd3l4PrHViEImZIdiaTksqu1ZcEiv007Amws.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://www.idcvendor.com/sites/default/files/css/css_MnXiytJtb186Ydycnpwpw34cuUsHaKc80ey5LiQXhSY.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://www.idcvendor.com/sites/default/files/css/css_hh2a5YepZ-3_RUwcOYKgng9Wir1GDyK6IGKTnVN2ffI.css" media="all" />
  <script type="text/javascript" src="http://www.idcvendor.com/sites/default/files/js/js_OUYbOVdgpVsXOdB2zFglWtxDbaBrvQlNhLOq45JrbmE.js"></script>
<script type="text/javascript" src="http://www.idcvendor.com/sites/default/files/js/js_qnirjCmfYCTGt8eAl7YNs39FniXsSzaF7laxop7u5Jo.js"></script>
<script type="text/javascript" src="http://www.idcvendor.com/sites/default/files/js/js_BYXSmG-3mzRJIPiq5YJNq74ZvT5IqdY4Ve1YcJuK0yE.js"></script>
<script type="text/javascript" src="http://www.idcvendor.com/sites/default/files/js/js_AHyBAYZMC0aoLby7IhzDcekyKo2__10bztcN6PSiv_g.js"></script>

</head>
<body class="">
    <div id="header">



  <div class="floatright">



  </div>

</div>

<!--header end-->

<div id="nav">
  <div class="left"></div>
  <div class="right"></div>
  <ul>
   <li><a class="current" href="/">Home</a></li>

<li class="has_children"><a class=""href="#">product and sercvice<span></span></a>
      <div class="sub-menu">
            <div class="child">
         <p><a href="/addons.html">product</a></p>
          <ul>
            <li><a href="/cpanel.html">cPanel</a></li>
            <li><a href="/vps.html">cPanel VPS</a></li>
            <li><a href="/enkompass.html">Enkompass</a></li>
            <li><a href="/whmcs.html">WHMCS</a></li>
            <li><a href="/cloudlinux.html">CloudLinux</a></li>
            <li><a href="/r1soft.html">R1Soft</a></li>
            <li><a href="/onapp.html">OnApp</a></li>
            <li><a href="/qyqq.html"> QQ</a></li>
          </ul>
        </div>
            <div class="child">
        <p><a class="" href="/technicalsupport.html" target="_self">service</a></p>
          <ul>
            <li><a href="/cpanelconfig.html">cPanel</a></li>
            <li><a href="/servermaintenance.html">test</a></li>
            <li><a href="/csfinstall.html">CSF</a></li>
            <li><a href="/cpanelpage.html">wordpress</a></li>
            <li><a href="/salewebsite.html">wordpress</a></li>
            <li><a href="/dnscluster.html">DNS</a></li>
           </ul>
            </div>
          </div>
        </li>
     <li><a class="" href="/price.html">expamle </a></li>
    <li class="has_children"><a class="" href="/solution.html">expamle <span></span></a>
      <div class="sub-menu02">
            <ul>
        <li><a href="/hostsolution.html">expamle </a></li>
        <li><a href="/hosthc.html">expamle </a></li>
        <li><a href="/webdevelop.html">expamle </a></li>
        <li><a href="/customerfa.html">expamle </a></li>
      </ul>
      </div>
    </li>
    <li class="has_children"><a class="" href="/support.html">test two<span></span></a>
    <div class="sub-menu02">
      <ul>
        <li><a href="http://cp.idcvendor.com">test</a></li>
        <li><a href="/contact.html">test</a></li>
      </ul>
      </div>
    </li>
    <li class="has_children"><a class="" href="/partner.html">test one<span></span></a>
    <div class="sub-menu02">
      <ul>
        <li><a href="/partner.html">test</a></li>
      </ul>
      </div>
    </li>
    <li class="has_children"><a class="" href="/about.html">about us<span></span></a>
    <div class="sub-menu02">
      <ul>
        <li><a href="/about.html">join us</a></li>
        <li><a href="/join-us.html">join us</a></li>
      </ul>
      </div>
    </li>

  </ul>
</div>
<!--nav end-->

<div class="wrapper">

  <div class="service24"></div>

  <div class="grid01">

    <div class="floatleft"><img src="http://cdn2.idcvendor.com/images/cpanel.jpg" alt="cPanel-logo" /></div>




  </div>

  <div class="apdiv1"></div>

</div>

<!--wrapper end-->

<div id="free">





</div>


<!--footer end-->  </body>
</html>

i have set z-index to sub-menu02 div ,why the part under about us is behind the image. and can’t click the link in it. the same as product and sercvice navigation. how to correct it? thank you

2

Try this:


#nav {position: relative; z-index: 100;}
3

it ok. why it can do that. thank you.

4

IE 7 and under had a z-index problem which this fixes. The #nav by default should be z-index: 1, but those versions make it z-index: 0 or something, meaning that z-index on any children doesn’t count. Or something. :shifty: