62,039
社区成员
发帖
与我相关
我的任务
分享关于ie6下z-index的问题！！！
我的网页头部布局为“
<body>
<div id="view">
<div id="head">
……
<div id="mainMenu">--导航栏
</div>
<div id="logo">
这里是张与导航栏同宽的图片
</div>
</div>--end head
……
</div>--end view
</body>
css代码:
#view { width: 1000px; margin: 0 auto; position:relative;z-index:1;}
#head { font-size: 1.2em; position:relative;z-index:2; }
#logo { position: relative; width: 100%; height: 232px; overflow: hidden; background: #398db9 url('../images/bg-logo.jpg') 0 0 no-repeat;z-index:3; }
#mainMenu { height: 43px; padding: 0 12px; background: #0f2132 url('../images/bg-menu.gif') no-repeat;position:relative;z-index:4;}
#mainMenu ul { position: relative; height: 100%;}
#mainMenu ul li { position: relative; float: left; }
#mainMenu ul li a { display: block; width: 101px; height: 27px; padding-top: 16px; font-size: 12px; color: #fff; text-decoration: none; text-align: center; background: url('../images/bg-menu_item.gif') 0 0 no-repeat; }
#mainMenu ul li.active a,
#mainMenu ul li a:hover { background-color: #0a1520; background-position: 0 -43px; }
#mainMenu ul li ul{position:absolute;z-index:9999; display:none;}
#mainMenu ul li ul li{float:none; }
#mainMenu ul li:hover ul{display: block;}
在firefox和ie7、ie8下导航栏的下拉菜单都会覆盖在logo那张图片上，可是在ie6下就不显示下拉菜单，不知道为什么，请高手指点一下，不胜感激啊！！！
<body>
<div id="view">
<div id="head">
……
<div id="mainMenu">--导航栏
</div>
<div id="logo">
这里是张与导航栏同宽的图片
</div>
</div>--end head
……
</div>--end view
</body>
css代码:
#view { width: 1000px; margin: 0 auto; position:relative;z-index:1;}
#head { font-size: 1.2em; position:relative;z-index:2; }
#logo { position: relative; width: 100%; height: 232px; overflow: hidden; background: #398db9 url('../images/bg-logo.jpg') 0 0 no-repeat;z-index:3; }
#mainMenu { height: 43px; padding: 0 12px; background: #0f2132 url('../images/bg-menu.gif') no-repeat;position:relative;z-index:4;}
#mainMenu ul { position: relative; height: 100%;}
#mainMenu ul li { position: relative; float: left; }
#mainMenu ul li a { display: block; width: 101px; height: 27px; padding-top: 16px; font-size: 12px; color: #fff; text-decoration: none; text-align: center; background: url('../images/bg-menu_item.gif') 0 0 no-repeat; }
#mainMenu ul li.active a,
#mainMenu ul li a:hover { background-color: #0a1520; background-position: 0 -43px; }
#mainMenu ul li ul{position:absolute;z-index:9999; display:none;}
#mainMenu ul li ul li{float:none; }
#mainMenu ul li:hover ul{display: block;}
在firefox和ie7、ie8下导航栏的下拉菜单都会覆盖在logo那张图片上，可是在ie6下就不显示下拉菜单，不知道为什么，请高手指点一下，不胜感激啊！！！
...全文
请发表友善的回复…
发表回复
damon08708 2011-11-17
- 打赏
- 举报
ie6 好像不支持z-index:0 哦~
一片冰心在玉壶 2011-05-07
- 打赏
- 举报
杯具 不兼容~~~~
样式恶心人。。
写两套样式，判断浏览器吧
样式恶心人。。
写两套样式，判断浏览器吧
yaohua60 2011-05-07
- 打赏
- 举报
改用js实现了，css实现太麻烦了，可恶的ie6！！！
子夜__ 2011-05-07
- 打赏
- 举报
不显示下拉菜单 可能是因为图片覆盖了。
z-index:-1
z-index:-1
