Dropdown menu not displaying in IE7

I'm currently building a website which uses Projekktor to play the movies and JQuery for almost everything else, i.e, navigation, displaying panels etc. The development link is - http://www.hundredframes.com/dev/home/

I've got the site to run on Firefox, Chrome, Safari and Opera. But as always, IE has me stuck. I'm using the IE matrix filter to skew the text and Cufon to render the fonts. The workflow is - user clicks a link. If it has a sub-menu, the first item of the sub-menu is highlighted and the content for that link displayed.

At the moment in IE7, the content for the first sub-menu link is displayed but the links of the sub-menu are not displayed and hence the user cannot naviagte to any other sub-section. I've also used a background image for the links to avoid the aliasing issue associated with skewing text in IE7. Oddly enough, when you click a thumbnail in the directors section, the sub-menu listing out the directors is displayed.

I think it's got something to do with the z-index stacking order, though i've assigned z-index values to all elements. The code for the menu is as follows:

---------------HTML------------------

<ul id="menu" class="left">
    <li id="direct">
        <a href="#" id="direct-lnk" onClick="return false;" title="Directors">directors</a>
        <ul class="list">
            <li id="vishal"><a href="#" id="vishal-lnk" onClick="return false;" title="Vishal Punjabi">vishal punjabi</a></li>
            <li id="shiraz"><a href="#" id="shiraz-lnk" onClick="return false;" title="Shiraz Bhattacharya">shiraz bhattacharya</a></li>
            <li id="roshan"><a href="#" id="roshan-lnk" onClick="return false;" title="Roshan Shetty">roshan shetty</a></li>
            <li id="saurabh"><a href="#" id="saurabh-lnk" onClick="return false;" title="Saurabh Ghosh">saurabh ghosh</a></li>
            <li id="mark"><a href="#" id="mark-lnk" onClick="return false;" title="Mark Toia">mark toia</a></li>
            <li id="alejandro"><a href="#" id="alejandro-lnk" onClick="return false;" title="Alejandro Toledo">alejandro toledo</a></li>
            <li id="claude"><a href="#" id="claude-lnk" onClick="return false;" title="Claude Genton">claude genton</a></li>
            <li id="tim"><a href="#" id="tim-lnk" onClick="return false;" 开发者_如何学运维title="Tim Gibbs">tim gibbs</a></li>
                    </ul>
                </li>
    <li id="about"><a href="#" id="about-lnk" onClick="return false;" title="About us">about us</a></li>
    <li id="production">
        <a href="#" id="production-lnk"  onclick="return false;" title="Production services">production services</a>
        <ul class="list">
            <li id="locations"><a href="#" id="locations-lnk" onClick="return false;" title="Locations">locations</a></li>
            <li id="casting"><a href="#" id="casting-lnk" onClick="return false;" title="Casting">casting</a></li>
            <li id="crews"><a href="#" id="crews-lnk" onClick="return false;" title="Crews">crews</a></li>
            <li id="equipment"><a href="#" id="equipment-lnk" onClick="return false;" title="Equipment">equipment</a></li>
            <li id="post-prod"><a href="#" id="post-prod-lnk" onClick="return false;" title="Post production">post production</a></li>
        </ul>
    </li>
    <li id="get"><a href="#" id="get-lnk" onClick="return false;" title="Get in touch">get in touch</a></li>
</ul>

Below is the CSS for IE7

IE7 CSS

#menu{ 
    margin:0 auto; 
    list-style-type:none; 
    padding:103px 0 20px 0; 
    background:url(../img/layout/menu-line.gif) repeat-y 8px 0; 
    height:auto; 
    min-height:250px; 
    max-height:515px; 
    width:auto; 
    min-width:180px; 
    position:relative; 
    z-index:-1 !important; 
}

#menu > li{ 
    margin-left:4px; list-style-type:none;
    position:relative;
    height:auto; min-height:25px; width:210px;
    margin:10px 0;
}

#menu > li > a{ 
    display:block; 
    width:210px; 
    height:auto; 
    overflow:hidden; 
    background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px 0; 
    font:1.75em/1em "Carbon Block"; 
    letter-spacing:0.015em; 
    color:#46c5e1; 
    text-transform:uppercase; 
    padding-left:20px; 
    position:absolute;
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-        0.21255656167002124, M22=1, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand');
}

#menu > li > a:hover{ 
    color:#ff9711; 
    background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px -35px; 
}

#menu > li > a.sel{ 
    color:#ff9711; background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px -35px; 
}

#menu > li > ul{ 
    display:none; 
    width:auto; 
    height:auto; 
    list-style-type:none; 
    margin:30px 0 10px 20px; 
    position:relative; 
    z-index:999;
}

#menu > li > ul > li{ 
    width:200px; 
    height:20px; 
    list-style-type:none; 
    position:relative; 
    padding-left:40px; 
    top:0; left:0; 
    z-index:990; 
}

#menu > li > ul > li:hover{ 
    color:#ff9711; 
}

#menu > li > ul > li > a{ 
    display:block; /*text-indent:-5000px;*/ 
    z-index:999; 
    position:absolute; top:0; left:0; 
    font:1.25em/1em "Carbon Block"; 
    letter-spacing:0.015em; color:#58585a;                                 
    background:url('../img/layout/anchor-bg.jpg'); 
    text-transform:uppercase; 
    height:20px; width:200px; z-index:999 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand');
}

#menu > li > ul > li > a:hover{ 
    color:#ff9711; 
}

#menu > li > ul > li > a.sel{ 
    color:#ff9711; 
}

Any help with this would be great as I've tried all the possibilities to get the sub-menu to display in IE7 and I'm running out of options. I can fall back to using images and avoiding the skew, Cufon etc as a whole but I'm not sure if it will solve the sub-menu display problem, and that would be my final option.

Also, I'm using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> in order to force IE into IE7 mode, if that makes a difference.

Best, Sagar

---

I got the menu to work in IE.

You need to add zoom:1 in the CSS for the menu list items or else the layout goes all haywire.