DHTML drop-down Menu Effect

<style>
Div.vert_menu
{
Position:absolute;
Visibility:hidden;
Display:none;
}

Div.horz_menu a {display:block; float:left;}
Div.vert_menu a {display:block; float:none;}

/*-----Sample 1-----------------------------------------------------------* *

Div.sample1 Div.vert_menu {border-bottom:1px solid black;}

Div.sample1 Div.horz_menu A,
Div.sample1 Div.vert_menu A
{
BORDER:1PX solid black;
padding:1px 0px 1px 0px;

width:106px;

Background: #ffffdd;

Text-decoration:none;
Font-family: "Times New Roman", serif;
font-weight:900;
font-size:13px;
Color: #008000;
}

Div.sample1 Div.horz_menu A {margin-right: -1px;}
Div.sample1 Div.vert_menu A {margin-bottom: -1px;}

Div.sample1 Div.horz_menu A:hover,
Div.sample1 Div.vert_menu A:hover,
Div.sample1 Div.horz_menu a.active,
Div.sample1 div.vert_menu a.active {background: #ffffee;}

/*-----Sample 2-----------------------------------------------------------* *

Div.sample2 Div.vert_menu {border-bottom:1px solid black;}

Div.sample2 Div.horz_menu A,
Div.sample2 Div.vert_menu A
{
BORDER:1PX solid black;

width:106px;

height:20px;
line-height:19px;
Vertical-align:middle;

Background:url (' dhtml-menu.png ') 0px 40px;

Text-decoration:none;
Font-family: "Times New Roman", serif;
font-weight:900;
font-size:13px;
Color: #206040;
}

Div.sample2 Div.horz_menu A {margin-right: -1px;}
Div.sample2 Div.vert_menu A {margin-bottom: -1px;}

Div.sample2 Div.horz_menu A:hover,
Div.sample2 Div.vert_menu a:hover
{
Color: #206060;
background-position:0px 20px;
}

Div.sample2 Div.horz_menu A.parent,
Div.sample2 Div.vert_menu a.parent
{
background-position:0px 0px;
}

Div.sample2 Div.horz_menu a.active,
Div.sample2 Div.vert_menu a.active,
Div.sample2 Div.horz_menu A.active:hover,
Div.sample2 Div.vert_menu A.active:hover
{
Color: #206060;
background-position:0px 60px;
}
</style>

<script type= "text/web Effects" >
function At_display (x)
{
var win = window.open ();
for (var i in X) win.document.write (i+ ' = ' +x[i]+ ' <br> ');
}

Dropdown box **********************************************************

var at_timeout = 50;

Show aux * * * *

function At_show_aux (parent, child)
{
var p = document.getElementById (parent);
var C = document.getElementById (child);

P.classname = "active";

if (c.offsetwidth <= 0)
{
C.style.position = "absolute";
c.style.visibility = "visible";
C.style.display = "block";
}

var direction = undefined;
if (P.parentnode && p.parentnode["at_position"] = = "X")
Direction = p.parentnode["At_direction"];

var top = (c["at_position"] = = "Y")? p.offsetheight:0;
var left1 = (c["at_position"] = = "X")? p.offsetwidth:0;
var left2 = (c["at_position"] = = "X")? -c.offsetwidth:0;
var left3 = (c["at_position"] = = "X")? p.offsetwidth:0;

for (; p; p = p.offsetparent)
{
if (p.style.position!= ' absolute ')
{
LEFT1 + = P.offsetleft;
left2 + = P.offsetleft;
Top + = P.offsettop;
}
Left3 + = P.offsetleft;
}

if (direction)
{
left = (Direction = "right")? left1:left2;
c[' at_direction '] = direction;
}
Else
{
left = (Left3+c.offsetwidth < document.body.offsetwidth)? left1:left2;
c[' at_direction '] = (Left3+c.offsetwidth < document.body.offsetwidth)? ' Right ': ' Left ';
}

C.style.position = "absolute";
c.style.visibility = "visible";
C.style.display = "block";
C.style.top = top + ' px ';
C.style.left = left+ ' px ';
}

Hide aux * * * *

function At_hide_aux (parent, child)
{
document.getElementById (parent). classname = "parent";
document.getElementById (child). Style.visibility = "hidden";
document.getElementById (Child)-style.display = "block";
}

Show * * * *

function At_show (e)
{
var p = document.getElementById (this["at_parent"]);
var c = document.getElementById (this["At_child"]);

At_show_aux (P.id, c.id);

Cleartimeout (c["at_timeout"]);
}

Hide * * * *

function At_hide ()
{
var c = document.getElementById (this["At_child"]);

c["at_timeout"] = settimeout ("At_hide_aux" ("+this[" at_parent "]+" "," "+this[" At_child "]+") ", at_timeout);
}

Attach * * * *

function At_attach (parent, child, position)
{
P = document.getElementById (parent);
c = document.getElementById (child);

p["At_child"] = c.id;
c["At_child"] = c.id;
p["at_parent"] = p.id;
c["at_parent"] = p.id;
c["at_position"] = position;

P.onmouseo Tutorial ver = at_show;
P.onmouseout = At_hide;
C.onmouseover = At_show;
C.onmouseout = At_hide;
}

Dropdown menu *********************************************************

Build aux * * * *

function Dhtmlmenu_build_aux (parent, child, position)
{
document.getElementById (parent). classname = "parent";

document.write (' <div class= ' vert_menu ' id= ' +parent+ ' _child ' > ');

var n = 0;
for (var i in child)
{
if (i = = '-')
{
document.getElementById (parent). href = Child[i];
Continue
}

if (typeof child[i] = = "Object")
{
document.write (' <a class= ' parent "id=" ' +parent+ ' _ ' +n+ ' "> ' +i+ ' </a> ');
Dhtmlmenu_build_aux (parent+ ' _ ' +n, Child[i], "X");
}
else document.write (' <a id= "' +parent+ ' _ ' +n+ '" href= ' ' +child[i]+ ' "> ' +i+ ' </a> ');
n++;
}

document.write (' </div> ');

At_attach (Parent, parent+ "_child", position);
}

Build * * * *

function Dhtmlmenu_build (menu)
{
for (var i in menu) Dhtmlmenu_build_aux (i, menu[i], "Y");
}</script>

<body style= "font-family: ' Times New Roman ';" font-size:13px; Color: #a0a0a0; >

<!--Sample 1-->

<div class= "Sample1" >

<div class= "Horz_menu" >
<a id= "Sample1_home" href= "Javascript:alert (' home ');" >&nbsp;&nbsp;&nbsp;home</a>
<a id= "Sample1_downloads" href= "Javascript:alert" (' Downloads '); " >&nbsp;&nbsp;&nbsp;downloads</a>
<a id= "sample1_tips tutorial" href= "Javascript:alert (' tips ');" >&nbsp;&nbsp;&nbsp;tips</a>
<a id= "sample1_products" href= "Javascript:alert" (' Products '); " >&nbsp;&nbsp;&nbsp;products &gt;&gt;</a>
<BR clear= "both"/>
</div>

<script type= "Text/javascript" >

var submenu_samples  = {"-"                           : "Javascript:alert (' samples ');",
                          "&nbsp;&nbsp;&nbsp;sample 1": "Javascript:alert (' Sample 1 ');",
                          "&nbsp;&nbsp;&nbsp;sample 2": "Javascript:alert (' Sample 2 ') ; ",
                          "&nbsp;&nbsp;&nbsp;sample 3": "Javascript:alert (' Sample 3 ') ;" };

var submenu_product2 = {"-": "Javascript:alert (' Product 2 ');",
"&nbsp;&nbsp;&nbsp;description": "Javascript:alert (' description ');",
"&nbsp;&nbsp;&nbsp;samples &gt;&gt;"
: Submenu_samples,
"&nbsp;&nbsp;&nbsp;purchage": "Javascript:alert (' purchage ');"};

var submenu_products = {"&nbsp;&nbsp;&nbsp;product 1"    : "Javascript:alert" (' Product 1 '); ",
                          "&nbsp;&nbsp;&nbsp;product 2 &gt;&gt;"
                                                            : Submenu_product2,
                          "&nbsp;&nbsp;& Nbsp;product 3 "   :" Javascript:alert (' Product 3 '); "};

var menu = {"Sample1_products": submenu_products};

Dhtmlmenu_build (menu);

</script>

</div>

Some text goes here...<br/>
Some text goes here...<br/>

<!--Sample 2-->

<div class= "Sample2" >

<div class= "Horz_menu" >
<a id= "Sample2_home" href= "Javascript:alert (' home ');" >&nbsp;&nbsp;&nbsp;home</a>
<a id= "sample2_products" href= "Javascript:alert" (' Products '); " >&nbsp;&nbsp;&nbsp;products</a>
<a id= "Sample2_downloads" href= "Javascript:alert" (' Downloads '); " >&nbsp;&nbsp;&nbsp;downloads</a>
<a id= "sample2_tips" href= "Javascript:alert (' tips ');" >&nbsp;&nbsp;&nbsp;tips</a>
<BR clear= "both"/>
</div>

<script type= "Text/javascript" >

var submenu_samples  = {"-"                           : "Javascript:alert (' samples ');",
                          "&nbsp;&nbsp;&nbsp;sample 1": "Javascript:alert (' Sample 1 ');",
                          "&nbsp;&nbsp;&nbsp;sample 2": "Javascript:alert (' Sample 2 ') ; ",
                          "&nbsp;&nbsp;&nbsp;sample 3": "Javascript:alert (' Sample 3 ') ;" };

var submenu_product2 = {"-"                              : "Javascript:alert (' Product 2 '); ",
                          "&nbsp;&nbsp;&nbsp;description": "javascript: Alert (' description '); ",
                          "&nbsp;&nbsp;&nbsp;samples"     : Submenu_samples,
                          "&nbsp;&nbsp;& Nbsp;purchage "   :" Javascript:alert (' purchage '); "};

var submenu_products = {"&nbsp;&nbsp;&nbsp;product 1": "Javascript:alert (' product 1 ');",
"&nbsp;&nbsp;&nbsp;product 2": Submenu_product2,
"&nbsp;&nbsp;&nbsp;product 3": "Javascript:alert (' Product 3 ');"};

var menu = {"Sample2_products": submenu_products};

Dhtmlmenu_build (menu);

</script>

</div>

Some text goes here...<br/>
Some text goes here...<br/>
Some text goes here...<br/>
Some text goes here...<br/>
Some text goes here...<br/>
Some text goes here...<br/>
Some text goes here...<br/>
Some text goes here...<br/>
Some text goes here ...

</body>