Question

我有一点问题，我现在很难解决它。顶级菜单正在工作......很奇怪。要查看问题，请访问：proba.dalipro.com。

用于控制菜单的JS：

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

菜单的

和css：

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

我需要做些什么来修复下拉功能？

Answer 1

将left从子菜单中取出：

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

另外，请将样式表中的#menu_top ul和#menu_top ul li更改为：

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

#menu_top ul li
{

}

使用jQuery和偏移量

1 个答案: