如何解决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>
#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,M21=-0.21255656167002124,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,SizingMethod=\'auto expand\');
}
#menu > li > ul > li > a:hover{
color:#ff9711;
}
#menu > li > ul > li > a.sel{
color:#ff9711;
}
解决方法
我有要在IE中工作的菜单。
您需要在CSS中为菜单列表项添加“ 2”，否则布局将变得一团糟。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。