Форум программистов [Powered by Invision Power Board]

Код

<HTML>
<HEAD>
<TITLE>выпадающее меню (DOM)</TITLE>
<STYLE>
html, body{background-color:#eee;margin:0px;padding:0px}
#contForTbl{border-width:0px;background-color:lightgreen}
#menu div{width:150px;background-color:lightgreen;color:white;position:absolute;top:0;left:0;display:none;z-index:10;}
#menu a:link, #menu a:visited, #menu a:active{padding:3px 10px 3px 10px;display:block;background-color:transparent;color:royalblue;font-size:12px;font-weight:bold;text-align:left;font-family:Arial,sans-serif;text-decoration:none;width:*}
#menu a:hover{background-color:royalblue;color:white;text-decoration:none}
#contentForA td{border-width:0px;padding:0px}
#contentForA a:link, #contentForA a:visited, #contentForA a:active{vertical-align:sub;padding:3px 10px 3px 10px;display:block;background-color:transparent;color:white;font-size:12px;font-weight:bold;text-align:center;font-family:Arial,sans-serif;text-decoration:none}
#contentForA a:hover{background-color:royalblue;color:white;text-decoration:none;display:block;}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
</HEAD>
<BODY>
<BR><BR><BR><BR><BR><BR><BR>
<CENTER>
<DIV id="contForTbl">
<TABLE cellspacing="0" cellpadding="0" border="0">
<TR id="contentForA" width="100%">
<TD><A onMouseOver="showMenu(this,'el1')" href="#" alt=''>первое меню</A></TD>
<TD><A onMouseOver="showMenu(this,'el2')" href="#" alt=''>второе меню</A></TD>
<TD><A onMouseOver="showMenu(this,'el1')" href="#" alt=''>третье меню</A>    </TD>
<TD><A onMouseOver="showMenu(this,'el2')" href="#" alt=''>четветое меню</A></TD>
</TR>
</TABLE>
</DIV>
</CENTER>
<DIV id="menu">
    <DIV id="el1">
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
    </DIV>
    <DIV id="el2">
<A href="#">вторая подгруппа</A>
<A href="#">вторая подгруппа</A>
<A href="#">вторая подгруппа</A>
<A href="#">вторая подгруппа</A>
<A href="#">вторая подгруппа</A>
    </DIV>
</DIV>
<script>
function showMenu(event,whoIs)
{
hideMenu();
var elem = document.getElementById(whoIs);
var pos = getPos(event);
elem.style.left=pos.x;
elem.style.top=pos.y+event.offsetHeight;
elem.style.display='block';
}
function getPos(event)
{
var pos ={x:0,y:0};
while(event)
{pos.x+=event.offsetLeft;pos.y+=event.offsetTop;event = event.offsetParent}
return pos
}

var handle2Menus=document.getElementById('menu').getElementsByTagName('DIV');
function hideMenu(){for(i=0;i<handle2Menus.length;i++) handle2Menus[i].style.display='none'}
document.onclick=hideMenu;
</SCRIPT>
</BODY>
</HTML>