Şunun bana nasıl yapılacağını açıklarmısınız acaba?

<ul id="sddm">
    <li><a href="#"
        onmouseover="mopen('m1')"
        onmouseout="mclosetime()">Home</a>
        <div id="m1"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href="#"
        onmouseover="mopen('m2')"
        onmouseout="mclosetime()">Download</a>
        <div id="m2"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

CSS kodu
#sddm
{   margin: 0;
   padding: 0;
   z-index: 30}

#sddm li
{   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
   font: bold 11px arial}

#sddm li a
{   display: block;
   margin: 0 1px 0 0;
   padding: 4px 10px;
   width: 60px;
   background: #5970B2;
   color: #FFF;
   text-align: center;
   text-decoration: none}

#sddm li a:hover
{   background: #49A3FF}

#sddm div
{   position: absolute;
   visibility: hidden;
   margin: 0;
   padding: 0;
   background: #EAEBD8;
   border: 1px solid #5970B2}

   #sddm div a
   {   position: relative;
      display: block;
      margin: 0;
      padding: 5px 10px;
      width: auto;
      white-space: nowrap;
      text-align: left;
      text-decoration: none;
      background: #EAEBD8;
      color: #2875DE;
      font: 11px arial}

   #sddm div a:hover
   {   background: #49A3FF;
      color: #FFF}

var timeout   = 500;
var closetimer   = 0;
var ddmenuitem   = 0;

// open hidden layer
function mopen(id)
{   
   // cancel close timer
   mcancelclosetime();

   // close old layer
   if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

   // get new layer and show it
   ddmenuitem = document.getElementById(id);
   ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
   if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
   closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
   if(closetimer)
   {
      window.clearTimeout(closetimer);
      closetimer = null;
   }
}

// close layer when click-out
document.onclick = mclose;

<ul id="sddm">
    <li><a href="#"
        onmouseover="mopen('m1')"
        onmouseout="mclosetime()">Home</a>
        <div id="m1"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href="#"
        onmouseover="mopen('m2')"
        onmouseout="mclosetime()">Download</a>
        <div id="m2"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

var timeout   = 500;
var closetimer   = 0;
var ddmenuitem   = 0;

// open hidden layer
function mopen(id)
{   
   // cancel close timer
   mcancelclosetime();

   // close old layer
   if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

   // get new layer and show it
   ddmenuitem = document.getElementById(id);
   ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
   if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
   closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
   if(closetimer)
   {
      window.clearTimeout(closetimer);
      closetimer = null;
   }
}

// close layer when click-out
document.onclick = mclose;

CSS kodu
#sddm
{   margin: 0;
   padding: 0;
   z-index: 30}

#sddm li
{   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
   font: bold 11px arial}

#sddm li a
{   display: block;
   margin: 0 1px 0 0;
   padding: 4px 10px;
   width: 60px;
   background: #5970B2;
   color: #FFF;
   text-align: center;
   text-decoration: none}

#sddm li a:hover
{   background: #49A3FF}

#sddm div
{   position: absolute;
   visibility: hidden;
   margin: 0;
   padding: 0;
   background: #EAEBD8;
   border: 1px solid #5970B2}

   #sddm div a
   {   position: relative;
      display: block;
      margin: 0;
      padding: 5px 10px;
      width: auto;
      white-space: nowrap;
      text-align: left;
      text-decoration: none;
      background: #EAEBD8;
      color: #2875DE;
      font: 11px arial}

   #sddm div a:hover
   {   background: #49A3FF;
      color: #FFF}

İyi Günler...