<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>