Internet Explorer 7 CSS菜单定位 [英] Internet Explorer 7 CSS Menu positioning

问题描述

我已在HTML和CSS中创建了一个适用于所有主流浏览器（Chrome，Firefox，IE8 +和Safari）的菜单。您可以在这里找到它：：

• .block ul ，添加 position：relative; z-index：3 。
$

• c $ c> z-index 上＃player-area 。

I have created a menu in HTML and CSS that works in all the major browsers (Chrome, Firefox, IE8+, and Safari). You can find it here: http://www.calvaryccm.com/MenuTest.aspx

The problem occurs in IE 7.

I have a hover menu using some JS for effect. When I try to render it in IE7 this is what happens:

I need some help figuring out how to position the menu under the text. Thank you for your help!

解决方案

I'm not sure whether you want to use .block or .nav in the selectors below. I've gone with .block because I can see it being applied to the element.

• On .block ul, remove overflow: hidden.
• On .block li, add position: relative.
• On .block ul.nav ul, add left: 0.

You now have the infamous IE6/7 z-index problem:

• To fix it in this case, on .block ul, add position: relative; z-index: 3.
• z-index: 3 to be one higher than the z-index on #player-area.

这篇关于Internet Explorer 7 CSS菜单定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！