下拉菜单在IE7中不显示
下拉菜单在IE7中不显示
提问于 2011-05-28 06:47:09
我目前正在建立一个网站，它使用Projekktor来播放电影和JQuery，几乎所有的东西，比如导航，显示面板等等。开发链接是- http://www.hundredframes.com/dev/home/。
我已经在Firefox，Chrome，Safari和Opera上运行了这个网站。但和往常一样，我被困住了。我使用IE矩阵过滤器来倾斜文本，使用Cufon来呈现字体。工作流是-用户单击一个链接。如果它有一个子菜单，子菜单的第一项将被高亮显示，并显示该链接的内容。
目前，在IE7中，第一个子菜单链接的内容被显示，但子菜单的链接没有显示，因此用户无法导航到任何其他子部分。我还为链接使用了背景图像，以避免与IE7中的倾斜文本相关的别名问题。奇怪的是，当您单击“董事”部分中的缩略图时，会显示列出董事的子菜单。
我认为这与z-索引的堆叠顺序有关，尽管我已经为所有元素分配了z-索引值。菜单的代码如下：
<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模式，如果这有区别的话。
最好的，萨加尔
回答 1
Stack Overflow用户
发布于 2011-06-14 09:06:45
我有菜单要在IE里工作。
您需要在CSS中为菜单列表项添加zoom:1，否则布局就会混乱不堪。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6160122
复制相关文章
相似问题
腾讯云开发者
