The z-index does not work for subDiv

Question

I have 2 Divs inside each other, the inside div has z-index:2 and will be displayed when the mouse is over the Div Submenu and the main div has z-index:1 but when I move my mouse over Submenu the inside div opens under the the main div, what should I do ? thx

<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>

position:relative is not my intend, it's positioned absolute — shervin khaleghjoo, Nov 06 '15 at 07:26
check a question and answeres in [this link](http://stackoverflow.com/questions/5928059/absolute-positioning-inside-absolute-position) — gilchris, Nov 06 '15 at 08:34

score 0 · Accepted Answer · answered Nov 06 '15 at 09:42

0

to you need to add z-index property to the submenu text div tag not to the div with "id= menu" because this div also include the content of hovered div also.

your code will be:

SubMenu images/small_right_arrow.png"> Submenu1 Submenu2 1

answered Nov 06 '15 at 09:42

panwar

973
9
13

thx, just removing id="Menu" z-index is enough, the subDiv gained the id="menu" z-index – shervin khaleghjoo Nov 06 '15 at 10:34

The z-index does not work for subDiv

1 Answers1