IE7中不显示下拉菜单

| 我目前正在建立一个网站,该网站使用Projekktor播放电影和JQuery来播放几乎所有其他内容,即导航,显示面板等。开发链接为-http://www.hundredframes.com/dev/home/ 我已经在Firefox,Chrome,Safari和Opera上运行了该网站。但是像往常一样,IE让我陷于困境。我正在使用IE矩阵过滤器来倾斜文本,并使用Cufon来呈现字体。工作流程为-用户单击链接。如果它具有子菜单,则该子菜单的第一项将突出显示,并显示该链接的内容。 目前,在IE7中,显示了第一个子菜单链接的内容,但未显示该子菜单的链接,因此用户无法导航到任何其他子部分。我还对链接使用了背景图片,以避免与IE7中的文本倾斜相关的别名问题。奇怪的是,当您单击导演部分中的缩略图时,将显示列出导演的子菜单。 我认为这与z-index的堆叠顺序有关,尽管我已经为所有元素分配了z-index值。菜单的代码如下: --------------- 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>
以下是IE7的CSS 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; 
}
由于我已经尝试了所有可能的方法来使子菜单显示在IE7中并且我用尽了所有选项,因此对它的任何帮助将非常有用。我可以回到使用图像的角度,从整体上避免歪斜,Cufon等问题,但是我不确定它是否可以解决子菜单显示问题,那将是我的最终选择。 另外,我正在使用强制IE进入IE7模式,如果有所不同。 最好, 萨加尔     
已邀请:
        我有要在IE中工作的菜单。 您需要在CSS中为菜单列表项添加“ 2”,否则布局将变得一团糟。     

要回复问题请先登录注册