Using jQuery and offset
<p>I have a bit of a problem and I am struggling to solve it for some time now. 
Top menu is working... strange. 
To see the problem go to: proba.dalipro.com.</p>

<p>JS for controlling menu:</p>

<pre><code>var timeoutID;
  jQuery(function(){
  jQuery('.dropdown').mouseenter(function(){
  jQuery('.sublinks').stop(false, true).hide();
  window.clearTimeout(timeoutID);
  var submenu = jQuery(this).parent().next();

 submenu.css({
  position:'absolute',
  top: jQuery(this).offset().top + jQuery(this).height() + 'px',
  left: jQuery(this).offset().left + 'px',
  zIndex:100
  });

  submenu.stop().slideDown(300);

  submenu.mouseleave(function(){
  jQuery(this).slideUp(300);
  });

  submenu.mouseenter(function(){
  window.clearTimeout(timeoutID);
  });

  });
  jQuery('.dropdown').mouseleave(function(){
  //        timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).hide();}, 250);  // just hide
  timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).slideUp(300);}, 250);  // slide up
  });
  });
</code></pre>

<p>and css for menu:</p>

<pre><code>/* CSS For Dropdown Menu Start */
#menu_top ul
{
    list-style:none;
    padding:0px;
    margin:0px;
}

#menu_top ul li
{
    display:inline;
    float:left;
}

#menu_top ul li a
{
    color:#ffffff;
    background:#990E00;
    margin-right:5px;
    font-weight:bold;
    font-size:12px;  
    text-decoration:none;
    display:block;
    width:100px;
    height:25px;
    line-height:25px;
    text-align:center; 
    border: 1px solid #560E00;
}

#menu_top ul li a:hover
{
    color:#cccccc;
    background:#560E00;
    font-weight:bold;
    text-decoration:none;
    display:block;
    width:100px;
    text-align:center;
    border: 1px solid #000000;
}

#menu_top ul li.sublinks a
{
    color:#000000;
    background:#f6f6f6;
    border-bottom:1px solid #cccccc;
    font-weight:normal;
    text-decoration:none;
    display:block;
    width:100px;
    text-align:center;
    margin-top:2px;
}

#menu_top ul li.sublinks a:hover
{
    color:#000000;
    background:#FFEFC6;
    font-weight:normal;
    text-decoration:none;
    display:block;
    width:100px;
    text-align:center;
}

#menu_top ul li.sublinks
{
    display:none;
    position: relative;
}
/* CSS For Dropdown Menu End */
</code></pre>

<p>What I need to do to fix drop down function?</p>
