首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Z-索引不适用于subDiv。

问Z-索引不适用于subDiv。
EN

Stack Overflow用户
提问于 2015-11-06 07:13:36
回答 1查看 109关注 0票数 0

我的内部有两个div,内部div有z-index:2,当鼠标在Div子菜单上时显示,主div有z-index:1,但是当我将鼠标移到子菜单上时,内部div会在主div下打开,我该怎么办?thx

​

代码语言:javascript
复制
<div id="Menu" style="top:0px;left:121px;width:170px;display:inline-block;;position:absolute;z-index:1;">
  <div onmouseover="stayedIn=true;document.getElementById('SubMenu').style.display = 'inline-block';" onmouseleave="stayedIn=false;setTimeout(function(){if(stayedIn==false) {document.getElementById('SubMenu').style.display = 'none';}}, 300);" style="cursor:pointer;background-color:#10406e;height:20px;width:100%;color:white;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;">
    &nbsp;&nbsp;SubMenu
    <div style="float:right;display:inline-block;margin-top:5px;margin-right:5px;"><img border="0" src="../../<?php if($_SERVER['HTTP_HOST']=='localhost') echo 'worldnewsmaster/';?>images/small_right_arrow.png"></div>
  </div>
  <div id="SubMenu" onmouseover="stayedIn=true;" onmouseleave="stayedIn=false;setTimeout(function(){if(stayedIn==false) {document.getElementById('SubMenu').style.display = 'none';}}, 300);" style="top:0px;left:170px;width:120px;display:none;position:absolute;z-index:2;">
    <div style="height:20px;width:100%;color:white;background-color:#1864ad;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;">
      &nbsp;&nbsp;Submenu1
    </div>
    <div style="height:20px;width:100%;color:white;background-color:#1864ad;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;">
      &nbsp;&nbsp;Submenu2
    </div>
  </div>

  <div style="height:20px;width:100%;color:white;background-color:#10406e;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;">
    &nbsp;&nbsp;1
  </div>
</div>
<div id="Menu2" style="top:0px;left:291px;width:170px;display:inline-block;;position:absolute;z-index:1;">
  <div style="height:20px;width:100%;color:white;background-color:#10406e;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;">
    &nbsp;&nbsp;1_2
  </div>
</div>

​

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-06 09:42:33

您需要将z-index属性添加到子菜单文本div标记中,而不是添加到带有"id=菜单“的div中,因为该div还包括悬浮div的内容。

您的代码将是:

代码语言:javascript
复制
        SubMenu     images/small\_right\_arrow.png">                    Submenu1                   Submenu2                   1
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33561369

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档