Есть вертикальное меню,которое появляется при нажатии на кнопку с любой вложеностю подкатегорий, и нужно его скрыть когда курсор выйдет из меню. через простенькую ф-цию я показываю меню....
файл script.js
function show(id) {
document.getElementById(id).style.display='';
}
а вот скрыть выставляя display:none не получается, оно или вообще не закрывается или после выхода курсора с 1 пункта меню на другой закрывается (в зависимости куда вставить вызов ф-ции).
вот код....
цсс menu_style.css
|
Код:
|
#pmenu {padding:0; margin:25px 0 50px 15px; list-style-type: none; width:101px;}
#pmenu ul {padding:0; margin:0; list-style-type: none; width:201px;}
#pmenu li {position:relative;}
#pmenu a, #pmenu a:visited {display:block;width:200px; font-size:10px; color:#000; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background:#b2ab9b;; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a {background:#dfd7ca; color:#c00;}
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; top:0; left:201px;} |
пример страницы хтмл
<html>
<head>
<title></title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" media="all" type="text/css" href="menu_style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body bgcolor="#737994" text="#FFFFFF" link="#FFFFFF" topmargin="0" leftmargin="0">
<div class="conteiner1" style="border:1px solid #000000;">
<div class="button1">
<img onclick="show('menu')" src="button.gif"/>
</div>
<div id="menu" style="display: none;">
<!--
формат записи
<ul class='tree_ul'>
<li class='tree_li'><a href='' class='tree_a'></a>
</ul>
-->
<ul id='pmenu' name='pmenu'>
<li class="tree_li"><a href="" class="tree_a">1</a>
<ul class="tree_ul" id="tree_ul">
<li class="tree_li"><a href="" class="tree_a">11</a>
<li class="tree_li"><a href="" class="tree_a">12</a>
<li class="tree_li"><a href="" class="tree_a">13</a>
<li class="tree_li"><a href="" class="tree_a">14</a>
<li class="tree_li"><a href="" class="tree_a">15</a>
<li class="tree_li"><a href="" class="tree_a">16</a>
<li class="tree_li"><a href="" class="tree_a">17</a>
<ul class="tree_ul" id="tree_ul">
<li class="tree_li"><a href="" class="tree_a">171</a>
<li class="tree_li"><a href="" class="tree_a">172</a>
<li class="tree_li"><a href="" class="tree_a">173</a>
</ul>
<li class="tree_li"><a href="" class="tree_a">18</a>
<li class="tree_li"><a href="" class="tree_a">19</a>
</ul>
</ul>
</div></div>
</body>
</html>
может кто знает как решить проблему?