Programalama > JAVA SCRIPT

<style>
BODY { font-family:verdana, arial, helvetica; font-size:70%; }
	H1 { font-size:120%; font-style:italic; }
	
	DIV#divMenuBar { background-color:#6699CC; }
	TABLE#tblMenuBar TD { font-size:60%; color:white; padding:0px 5px 0px 5px; cursor:default; }
	TABLE#tblMenuBar TD.MenuMadde { font-weight:bold; cursor:hand; }
	
	DIV.clsMenu { 
		font-size:90%; background-color:#6699CC; 
		position:absolute; visibility:hidden; width:130px; 
		padding:5px 5px 5px 8px; border-top:1 white solid; 
	}
	DIV.clsMenu A { text-decoration:none; color:white; font-weight:bold; }
	DIV.clsMenu A:hover { color:moccasin; }

	BUTTON { font-family:tahoma; font-size:100%; }
</style>

<SCRIPT LANGUAGE="Javascript">
var eOpenMenu = null;

	function OpenMenu(eSrc,eMenu)
	{
		eMenu.style.left = eSrc.offsetLeft + divMenuBar.offsetLeft;
		eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;
		eMenu.style.visibility = "visible";
		eOpenMenu = eMenu;
	}

	function CloseMenu(eMenu)
	{
		eMenu.style.visibility = "hidden";
		eOpenMenu = null;
	}

	function document.onmouseover()
	{
		var eSrc = window.event.srcElement;
		if ("MenuMadde" == eSrc.className)
		{
			eSrc.style.color = "moccasin"; 
			var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];
			if (eOpenMenu && eOpenMenu != eMenu) 
			{
				CloseMenu(eOpenMenu);
			}
			if (eMenu) 
			{
				OpenMenu(eSrc,eMenu);
			}
		}
		else if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc)) 
		{
			CloseMenu(eOpenMenu);
		}
	}
	
	function document.onmouseout()
	{
		var eSrc = window.event.srcElement;
		if ("MenuMadde" == eSrc.className)
		{
			eSrc.style.color = ""; 
		}
	}	

</SCRIPT>

Aşağısı Body Kısmına Eklenecek-------------------------

<DIV ID="divMenuBar">
<TABLE ID="tblMenuBar" BORDER="0">
<TR>
		<TD CLASS="MenuMadde" ID="tdMenuBarItem01">MENÜ MADDE 01</TD>
<TD>|</TD>
		<TD CLASS="MenuMadde" ID="tdMenuBarItem02">MENÜ MADDE 02</TD>
<TD>|</TD>
		<TD CLASS="MenuMadde" ID="tdMenuBarItem03">MENÜ MADDE 03</TD>
</TR>
</TABLE>
</DIV>

<DIV CLASS="clsMenu" ID="divMenu01">
<DIV CLASS="clsMenuAra"></DIV>
	<DIV><A TARGET="_new" HREF="01.asp">Madde 01</A></DIV>
	<DIV><A TARGET="_new" HREF="02.asp">Madde 02</A></DIV>
	<DIV><A TARGET="_new" HREF="03.asp">Madde 03</A></DIV>
	<DIV><A TARGET="_new" HREF="04.asp">Madde 04</A></DIV>
	<DIV><A TARGET="_new" HREF="05.asp">Madde 05</A></DIV>
</DIV>

<DIV CLASS="clsMenu" ID="divMenu02">
<DIV CLASS="clsMenuAra"></DIV>
	<DIV><A TARGET="_new" HREF="11.asp">Madde 01</A></DIV>
	<DIV><A TARGET="_new" HREF="12.asp">Madde 02</A></DIV>
	<DIV><A TARGET="_new" HREF="13.asp">Madde 03</A></DIV>
	<DIV><A TARGET="_new" HREF="14.asp">Madde 04</A></DIV>
	<DIV><A TARGET="_new" HREF="15.asp">Madde 05</A></DIV>
</DIV>

<DIV CLASS="clsMenu" ID="divMenu03">
<DIV CLASS="clsMenuAra"></DIV>
	<DIV><A TARGET="_new" HREF="21.asp">Madde 01</A></DIV>
	<DIV><A TARGET="_new" HREF="22.asp">Madde 02</A></DIV>
	<DIV><A TARGET="_new" HREF="23.asp">Madde 03</A></DIV>
	<DIV><A TARGET="_new" HREF="24.asp">Madde 04</A></DIV>
	<DIV><A TARGET="_new" HREF="25.asp">Madde 05</A></DIV>
</DIV>