DIV overlapping DIV, a simple menu problem. [Archive]

Breeze

09-26-2004, 02:51 PM

I'm making a very simple menu for at chat, where you are supposed to click on a nickname, and a popup should hoover over it. The problem is however how the nicknames below are covering the popup box, even with z-index set.

I've figured that it is the NESTED div (menu) tag inside the NameTag div, that is causing this. If i move the menu div out one level so it is in line with all NameTag divs, it show up.

This causes a problem, beside the point that it seems much more troublesome to handle, which is mouseover gets activated immidiately and the menu starts to flicker in and out.

I hope someone have a sollution for this problem, have been bugging me all weekend :confused:

Here is the simple html code:

<div class="NameTag" onMouseOver="showmenu(this)" onMouseOut="hidemenu(this)" >Breeze
<div class="menu" onMouseOut="hidemenu(this)">
<a href="#">Profil</a><br/>
<a href="#">Site</a>
</div>
</div>
<div class="NameTag" onMouseOver="showmenu(this)" onMouseOut="hidemenu(this)" >Test
<div class="menu" id="1" onMouseOut="hidemenu(this)">
<a href="#">Profil</a><br/>
<a href="#">Site</a>
</div>
</div>

CSS:

div.NameTag
{
width:99%;
height:20px;
background-color:Silver;
border: 1px solid black;
text-indent: 5px;
position: relative;
z-index: 1;
}

div.menu
{
left: 10px;
top: 5px;
width:150px;
height:100px;
border: 1px solid black;
display: none;
background-color: gray;
padding: 1px;
position: absolute;
z-index: 100;
}

hemebond

09-26-2004, 10:59 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Info Popup</title>
<style type="text/css">
#css dd {
display:none;
}
#css:hover dd {
display:block;
}
</style>
</head>
<body>
<dl id="js">
<dt>Javascript popup</dt>
<dd><a href="">Profile</a></dd>
<dd><a href="">Site</a></dd>
</dl>
<dl id="css">
<dt>CSS popup</dt>
<dd><a href="">Profile</a></dd>
<dd><a href="">Site</a></dd>
</dl>
</body>
<script type="text/javascript">
function toggle_dd(e)
{
var dd = e.currentTarget.getElementsByTagName("dd");
for(var i = 0; i < dd.length; i++)
{
if(dd[i].style.display != "block")
{
dd[i].style.display = "block";
}
else
{
dd[i].style.display = "none";
}
}
}

var dd = document.getElementById("js").getElementsByTagName("dd");
for(var i = 0; i < dd.length; i++)
{
dd[i].style.display = "none";
}

document.getElementById("js").addEventListener("click",toggle_dd,true);
</script>
</html> Gecko DOM Reference (http://www.mozilla.org/docs/dom/domref/) Core Javascript Guide (http://devedge.netscape.com/library/manuals/2000/javascript/1.5/guide/)