Question

我有一点问题...我正在处理的网站在IE中工作得非常好....我被要求修复一些问题并使其在Chrome和Mozilla Firefox中运行。我现在的主要问题是Chrome和Mozilla中的下拉菜单无法正确显示（仅打开一半内容），当您将光标悬停在其上后，菜单会完全崩溃...

也许你们中的一些人可以从这里看到一些东西：

我非常感激您的时间！非常感谢！

使用Javascript：

var DDSPEED = 10;
var DDTIMER = 15;
var OFFSET = -2;
var ZINT = 100;
function ddMenu(id,d){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearInterval(c.timer);
  if(d == 1){
    clearTimeout(h.timer);
    c.style.display = 'block';
    if(c.maxh && c.maxh <= c.offsetHeight){return}
    else if(!c.maxh){
      c.style.left = (h.offsetWidth + OFFSET) + 'px';
      c.style.height = 'auto';
      c.maxh = c.offsetHeight;
      c.style.height = '0px';     
    }
    ZINT = ZINT + 1;
    c.style.zIndex = ZINT;
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
    h.style.backgroundColor='#D4D4D4';
      h.style.borderBottom='1px solid #b9d6dc';
  }else{
    h.style.backgroundColor='white';
    h.style.borderBottom='0px solid white';
    h.timer = setTimeout(function(){ddCollapse(c)},50);
  } 
}
function ddCollapse(c){
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}
function cancelHide(id){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearTimeout(h.timer);
  clearInterval(c.timer);
  if(c.offsetHeight < c.maxh){
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }
}

样式表：

* {padding:0; margin:0}

#wrapper {width:150px; padding:4px; margin:0 auto;font:10px; color:#66C;}
#leftcolumn {float:right; width:125px}
#rightcolumn {float:right; width:125px}
.main {width:160px; text-align:right; padding:2px;}
.main a, main a:active, .main a:visited {color:#036; border-bottom: 1px solid #FFF; }
.main a:hover {background-color:#D4D4D4; color:#399}

.dropdown {display:block; position:relative}
.dropdown dt {width:160px; text-align:right;color:#036; cursor:pointer;padding:2px; }
.dropdown .upperdd { text-align:right;border-bottom:none;}
.dropdown dt:hover {color:#399;}
.dropdown dd {position:absolute; padding-bottom:2px; top:0; overflow:hidden; display:none;  width: auto; opacity:150; border: 1px solid #036;}
.dropdown ul {width:90px;  list-style:none; opacity:150;}
.dropdown li {display:inline;opacity:150;}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding-left:4px; background-color:#F1F1F1; width:174px;padding:2px;}
.dropdown a:hover {background-color:#D4D4D4; color:#399;}
.dropdown .underline {border-bottom:1px solid #036;}

JSP

<dl class="dropdown">
    <dt id="two-ddheader" class="upperdd" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dash-Board</dt>
    <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">

下拉菜单未折叠并在Chrome和MF中正确显示

0 个答案: