<script type="text/javascript">  
   <!--  
   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;   
   // -->  
   </script>

<ul id="sddm">  
   <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>  
   <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">  
   <a href="http://faqpk.ru">HTML DropDown</a>  
   <a href="#">DHTML DropDown menu</a>  
   <a href="#">JavaScript DropDown</a>  
   <a href="#">DropDown Menu</a>  
   <a href="http://faqpk.ru"">CSS DropDown</a>  
   </div>  
   </li>  
   <li><a href="http://faqpk.ru" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>  
   <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">  
   <a href="http://faqpk.ru"">ASP Dropdown</a>  
   <a href="#">Pulldown menu</a>  
   <a href="#">AJAX dropdown</a>  
   <a href="#">DIV dropdown</a>  
   </div>  
   </li>  
  ...  
  ...  
  ...  
  </ul>

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