Javascript-форум - Ссылка под слоем перекрывает слой

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Ссылка под слоем перекрывает слой (https://javascript.ru/forum/misc/2903-ssylka-pod-sloem-perekryvaet-slojj.html)

Ссылка под слоем перекрывает слой

Есть несколько меню один под другим:

Меню 3: пункт 1 | пункт2 | пункт 3 | пункт 4 | пункт 5
Меню 2: пункт 1 | пункт2 | пункт 3 | пункт 4
Меню 1: пункт 1 | пункт2 | пункт 3

К пунктам скрытыми блоками прикрепляется подменю (любого уровня вложенности).

При этом, если мы открываем подменю Пункта 1 в Меню 3, то при наведении на Пункт 2 подменю закрывается. Все бы работало, не будь несколько меню, поскольку ссылки в Меню 1 и Меню 2 обрабатывают событие onmouseover, не смотря на то, что их перекрывает подменю пунктов Меню 3.

Для подменю испльзую дивы.

уже на нескольких форумах спросил. Неужели никто не сталкивался?

Выложите код проблемного места, а еще лучше - ссылку на проблемную страницу.
По вашему описанию совершенно ничего не понятно.

Devider,
Дело в том, что не зная в каком(их) браузерах проблема, и какой именно код у этого меню, какие стили в этих выпадающих меню и т.д. - помочь практически невозможно. Во всяком случае я не могу по такому описанию понять почему такая проблема возникает.

Такая проблема возникает во всех браузерах.

<style><!--

.layer { VISIBILITY: hidden; POSITION:absolute; margin-top:1px;}
.layer A{ text-align:left;  color:#FFFFFF}
.layer A:hover{}

TABLE.tmenu { border-collapse:collapse; border:0px;  }
TABLE.tmenu TH{ white-space:nowrap; padding:0px; text-align:left; color:#f06426; font-weight:normal; font:11px Verdana;  }
TABLE.tmenu TD{ padding:0px; vertical-align:top; font:11px Verdana;  color:#f06426; padding-left:3px; padding-right:3px;}
TABLE.tmenu A{text-transform:none; color:#000000; display:block; padding-bottom:3px; padding-top:3px;  text-decoration:none; font-weight:bold; } 
TABLE.tmenu A:hover{ color:#FF0000; text-decoration:none }
TABLE.tmenu A.select{ color:#FF0000; }

TABLE.submenu1{  border-collapse:collapse; border:0px;  }
TABLE.submenu1 TD{ white-space:nowrap; padding:5px; background-color:#ffffcc; }
TABLE.submenu1 TH{ white-space:nowrap; padding:0px; width:10px; height:10px;}
TABLE.submenu1 A{text-transform:none; color:#000000; display:block; padding-bottom:3px; padding-top:3px;   text-decoration:none; } 
TABLE.submenu1 A:hover{ color:#FF0000; text-decoration:none }
TABLE.submenu1 A.select{ color:#FF0000; }

</style>

var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
var DOM = (typeof(document.getElementById) != 'undefined');

var openLayers = new Array();
var noClose = 0;
var currentLayerNum=0;
var closeTimer = null;
var closeSubMenu = null;
var bTranState = 0;

function mopen(n, level)
{
  var vl = document.getElementById("menu_"+n);
 
  if(bTranState)
  {
    // vl.style.visibility='hidden';
	
	// currentLayerNum = 0;
	bTranState = 0;
  }
  else 
  {
	bTranState = 0; 

	if(closeSubMenu){ window.clearTimeout(closeSubMenu); closeSubMenu = null; }
	
	mcancelclosetime();
	
	if(openLayers[level] && (openLayers[level] != n)) document.getElementById("menu_"+openLayers[level]).style.visibility='hidden';
	
	openLayers[level] = n;
	currentLayerNum = n;	
	vl.style.visibility='visible';
  }			
}

/* Закрываем открытые подуровни, при перемещении курсора по пунктам меню  */
function mchitem(level, n)
{
 mcancelclosetime();	
	
 currentLayerNum = n;	
 closeSubMenu = window.setTimeout("mclose("+level+")", 300);
}

function mclosetime()
{
//	document.form.events.value+=" "+currentLayerNum;
 closeTimer = window.setTimeout(mallclose, 1000);
}
	
function mcancelclosetime()
{
//	document.form.events.value+=" cancel="+currentLayerNum;
 if(closeTimer) { window.clearTimeout(closeTimer); closeTimer = null; }				
}
	
function mclose(level)
{
 if (openLayers[level])
 { 
	for (i=level; i<openLayers.length; i++)
	{ 
		if (currentLayerNum!=openLayers[i]) { document.getElementById("menu_"+openLayers[i]).style.visibility='hidden'; openLayers[i]=''; }		
	} 
 }
}

/* Закрываем все открытые подменю */
function mallclose()
{
 if (openLayers.length>0) 
 {  
	for( var key in openLayers ) { document.getElementById("menu_"+openLayers[key]).style.visibility='hidden'; openLayers[key]='';  } 
 }
}
	
document.onclick = mallclose;

На выводе так

Меню 1

<TABLE class="tmenu"><tr> <td> <strong>1</strong></td>
<td>|</td><th > 
<a  href="javascript:mopen(2, 1); void(0);" >Работа&nbsp;</a>  
	
                Подменю
  	<DIV class="layer" style=" z-index:3" id="menu_2"><table class="submenu2"><tr><td >

	      
	<a  href="javascript:void(0);" onmouseover="javascript:mopen(34, 2); return false;"  class="smenu"  >Работодатели&nbsp;</a>

	</td></tr>
     
  	<tr><td >

	<a  href="/notice-board/1/2/35/" onmouseover="mchitem(2, 35);"  >Персонал&nbsp;</a>
	
	</td></tr> 

  	<tr><td >
	<a  href="/notice-board/1/2/36/" onmouseover="mchitem(2, 36);"  >Содействие в трудоустройстве&nbsp;</a>
	
	</td></tr> 
 <table>

Меню 2
<TABLE class="tmenu"><tr> <td> <strong>2</strong></td>
       
 	<td>|</td><th > 

  	<a  href="/notice-board/7/8/"  onmouseover="mclosetime()" >Бытовая техника&nbsp;</a>  
	
	</th>	
 	<td>|</td><th > 

  	<a  href="/notice-board/7/8/"  onmouseover="mclosetime()" >Бытовая техника&nbsp;</a>  
	
	</th>	
 	<td>|</td><th > 

  	<a  href="/notice-board/7/8/"  onmouseover="mclosetime()" >Бытовая техника&nbsp;</a>  
	
	</th>	
  </tr>
</table>

Мне нужно чтобы ссылки, закрытые подменю, не обрабатывали событие onmouseover.

Проблема была в другом. Дело в том что событие обрабатывалось не сразу и если мы прошлись курсором по нижним пунктам меню, срабатывал таймер, который выключал подменю.

Как мне подсказали на одном форуме

Цитата:

Блок, находящийся наверху, должен:
- во-первых, ДЕЙСТВИТЕЛЬНО быть НАВЕРХУ (т.е. иметь свойство z-index б_О_льшим, чем у ссылки внизу;
- во-вторых, блок должен ОБЯЗАТЕЛЬНО иметь УКАЗАННЫМ background (т.е. фон должен быть отличным от transparent)

Если эти два условия соблюдены, то ссылка не может срабатывать под блоком.