CODEWITHSUNDEEP
javascriptjquery
Sasha
Sasha

Reputation: 8705

Using jQuery and offset

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.

JS for controlling menu:

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
  });
  });

and css for menu:

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

What I need to do to fix drop down function?

Upvotes: 1

Views: 579

Answers (1)

Matt Bradley
Matt Bradley

Reputation: 4495

Take left out of the submenu css:

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

Also, change #menu_top ul and #menu_top ul li in your style sheet to:

#menu_top ul
{
    list-style:none;
    padding:0px;
    margin:0px;
    float: left
    position: relative;
}

#menu_top ul li
{

}

Upvotes: 4

Related Questions