Pop Menu Flicker problem

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I am trying to design a very basic popup menu system. I have a container div
which becomes visible, when a button is clicked. It contains a series of
divs each with a hyper link. When the mouse goes out of the container div
the contain div should dissappear. This works fine but rolling over the
container div causes it to flicker. It is like the edge of the subdivs
containing the hyperlinks are triggering the onMouseout. When I remove the
sub divs the problem dissappears. This is a problem in IE and FF so I am
assuming it is something non-buggy.

Re: Pop Menu Flicker problem

Here is the code if it helps

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="javascript">
var state = 'hidden';

function triggersub(layer_ref)

if (state == 'visible')
state = 'hidden';
else {
state = 'visible';

if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;

<style type="text/css">
.submenu {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 background-color: #CCCCCC;
 height: 30px;
 width: 200px;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;

 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 background-color: #CCCCCC;
 height: 90px;
 width: 200px;
/*position: absolute;
 left: 200px;

<div id="topmenu1" class="submenu"><a href="#"
onClick="triggersub('container1')">Top menu</a></div>
<div id="container1" class="subcontainer" style="visibility:hidden"

<div id="container1_1" onClick="alert('1')" class="submenu"></div>
<div id="container1_2" onClick="alert('2')"  class="submenu"></div>
<div id="container1_3" onClick="alert('3')"  class="submenu"></div>


Quoted text here. Click to load it

Site Timeline