<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://wallaby.ucoz.ru">HTML DropDown</a> 
  <a href="#">DHTML DropDown menu</a> 
  <a href="#">JavaScript DropDown</a> 
  <a href="#">DropDown Menu</a> 
  <a href="http://wallaby.ucoz.ru"">CSS DropDown</a> 
  </div> 
  </li> 
  <li><a href="http://wallaby.ucoz.ru" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a> 
  <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> 
  <a href="http://wallaby.ucoz.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}