<style> BODY { } .menuBar { POSITION: relative; BACKGROUND-COLOR: transparent; TEXT-ALIGN: center } .Bar { BORDER-RIGHT: blue 1px outset; BORDER-TOP: blue 1px outset; FLOAT: left; BORDER-LEFT: blue 1px outset; WIDTH: 100px; CURSOR: hand; TEXT-INDENT: 5px; BORDER-BOTTOM: blue 1px outset; POSITION: relative; BACKGROUND-COLOR: deepskyblue; TEXT-ALIGN: center } .menu { BORDER-RIGHT: buttonhighlight thin outset; BORDER-TOP: buttonhighlight thin outset; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight thin outset; WIDTH: 150px; LINE-HEIGHT: 140%; BORDER-BOTTOM: buttonhighlight thin outset; POSITION: absolute; BACKGROUND-COLOR: deepskyblue } .menuItem { PADDING-RIGHT: 15px; PADDING-LEFT: 10px; WIDTH: 100%; CURSOR: hand; LINE-HEIGHT: 20px; BORDER-BOTTOM: white 1px solid } .ItemMouseOver { PADDING-RIGHT: 15px; PADDING-LEFT: 10px; WIDTH: 100%; CURSOR: hand; COLOR: highlighttext; LINE-HEIGHT: 20px; BORDER-BOTTOM: white 1px solid; BACKGROUND-COLOR: highlight } .ItemMouseOut { WIDTH: 100% } .Arrow { FLOAT: right; FONT-FAMILY: Webdings; POSITION: absolute; TEXT-ALIGN: left } .barOver { BORDER-RIGHT: blue 1px ridge; BORDER-TOP: blue 1px ridge; FLOAT: left; BORDER-LEFT: blue 1px ridge; WIDTH: 100px; CURSOR: hand; TEXT-INDENT: 5px; BORDER-BOTTOM: blue 1px ridge; POSITION: relative; BACKGROUND-COLOR: deepskyblue; TEXT-ALIGN: center } </style> <SCRIPT language=javascript> function InitMenu() { var bar = menuBar.children for(var i=0;i < bar.length;i++) { var menu=eval(bar[i].menu) menu.style.visibility = "hidden" bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")") var Items = menu.children for(var j=0; j<Items.length; j++) { var menuItem = eval(Items[j].id) if(menuItem.menu != null) { menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>" //var tmp = eval(menuItem.id+"_Arrow") // tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15 FindSubMenu(menuItem.menu)} if(menuItem.cmd != null) { menuItem.onclick = new Function("Do("+menuItem.id+")") } menuItem.onmouseover = new Function("highlight("+Items[j].id+")") } } } function FindSubMenu(subMenu) { var menu=eval(subMenu) var Items = menu.children for(var j=0; j<Items.length; j++) { menu.style.visibility = "hidden" var menuItem = eval(Items[j].id) if(menuItem.menu!= null) { menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>" // var tmp = eval(menuItem.id+"_Arrow") //tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15 FindSubMenu(menuItem.menu) } if(menuItem.cmd != null) { menuItem.onclick = new Function("Do("+menuItem.id+")") } menuItem.onmouseover = new Function("highlight("+Items[j].id+")") } } function ShowMenu(obj) { HideMenu(menuBar) var menu = eval(obj.menu) var bar = eval(obj.id) bar.className="barOver" menu.style.visibility = "visible" menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft } function highlight(obj) { var PElement = eval(obj.parentElement.id) if(PElement.hasChildNodes() == true) { var Elements = PElement.children for(var i=0;i<Elements.length;i++) { TE = eval(Elements[i].id) TE.className = "menuItem" } } obj.className="ItemMouseOver" window.defaultStatus = obj.title ShowSubMenu(obj) } function Do(obj) { var cmd = eval(obj).cmd window.navigate(cmd) } function HideMenu(obj) { if(obj.hasChildNodes()==true) { var child = obj.children for(var j =0;j<child.length;j++) { if (child[j].className=="barOver") {var bar = eval(child[j].id) bar.className="Bar"} if(child[j].menu != null) { var childMenu = eval(child[j].menu) if(childMenu.hasChildNodes()==true) HideMenu(childMenu) childMenu.style.visibility = "hidden" } } } } function ShowSubMenu(obj) { PMenu = eval(obj.parentElement.id) HideMenu(PMenu) if(obj.menu != null) { var menu = eval(obj.menu) menu.style.visibility = "visible" menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft if(menu.getBoundingClientRect().right > window.screen.availWidth ) menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth } } </SCRIPT>

<body OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor=aliceblue><center> <script language="javascript" type="text/javascript" src="//ad.broadcaststation.net/ads/show_ad.php?width=728&height=90"></script> </center> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-4KX380T5BD"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-4KX380T5BD'); </script> <!-- END GOOGLE --> <geoads></geoads> <TR> <TD align=middle width="99%"><BASEFONT> <!-- Demonstration --> <DIV class=menuBar id=menuBar> <DIV class=Bar id=Bar4 menu="menu4" style="width: 144; height: 27">Hide Menu</DIV></DIV><!--MenuItem Definition --> <DIV class=menu id=menu4> <DIV class=menuItem id=menuItem4_1 style="width: 150; height: 20"> <a href="http://nguyenhuucuong.web1000.com/">Page #1</a></DIV> <DIV class=menuItem id=menuItem4_2>Page #2</DIV> <DIV class=menuItem id=menuItem4_3>Page #3</DIV> <DIV class=menuItem id=menuItem4_4>Page #4</DIV> <DIV class=menuItem id=menuItem4_5>Page #5</DIV> <DIV class=menuItem id=menuItem4_6>Page #6</DIV></DIV> <!-- End of Menu --> </TD></TR>