Menu-udvidelse vises forkert

Style:

#popupWindow
{
    position: absolute;
    width: 121px;
    padding: 1px;
    z-index: 90;
    display: none;

}

#popupcontainer
{
width: 120px;
padding: 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #7a7a7a;
color: #333;
opacity:0.8;
filter:alpha(opacity=80);
}

#popupcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#popupcontainer li
{
border-bottom: 1px solid #7a7a7a;
margin: 0;
font-size: 11px;
}

#popupcontainer li a
{
display: block;
padding: 3px 5px 3px 0.5em;
border-left: 10px solid #272727;
border-right: 10px solid #616161;
border-top: 1px solid #383838;
border-bottom: 1px solid #383838;
background-color: #383838;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #popupcontainer li a { width: auto; }

#popupcontainer li a:hover
{
border-left: 10px solid #636363;
border-right: 10px solid #adaaa6;
background-color: #7d7d7d;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
color: #fff;
}

HTML:

<div id="popupcontainer">
<div class="menutitle">OVerskrift</div>
<ul>
<li id="givvaek-ddheader" class="upperdd" onmouseover="ddMenu('givvaek',1)" onmouseout="ddMenu('givvaek',-1)"><a href="#">Punkt 1</a></li>
    <dd id="givvaek-ddcontent" onmouseover="cancelHide('givvaek')" onmouseout="ddMenu('givvaek',-1)" style="display:none; overflow: hidden; width: 125px;">
    <div class="menutitle">Punkt 1:</div>
    <ul>
        <li><a href="#">OVerskrift</a></li>
        <li><a href="#">Punkt 1.2</a></li>
        <li><a href="#">Punkt 1.3</a></li>
    </ul>
    </dd>
<li><a href="#">Punkt 2</a></li>
<li><a href="#">Punkt 3</a></li>
<li><a href="#">Punkt 4</a></li>
<li><a href="java script: void(0);" onclick="popUp();">Annuller</a></li>
</ul>
</div>

Javascript (popup.js)
if (!document.all)
document.captureEvents(Event.MOUSEMOVE)

// On the move of the mouse, it will call the function getPosition
document.onmousemove = getPosition;

// These varibles will be used to store the position of the mouse
var X = 0
var Y = 0

// This is the function that will set the position in the above varibles
function getPosition(args)
{
    div = document.getElementById('popupWindow');
   
    if (div.style.display=='' || div.style.display=='none')
    {
      // Gets IE browser position
      if (document.all)
      {
        X = event.clientX + document.body.scrollLeft
        Y = event.clientY + document.body.scrollTop
      }
     
      // Gets position for other browsers
      else
      { 
        X = args.pageX
        Y = args.pageY
      } 
    }
}

function popUp()
{
    var div;
   
    if(document.getElementById)
    // Standard way to get element
    div = document.getElementById('popupWindow');
    else if(document.all)
    // Get the element in old IE's
    div = document.all['popupWindow'];
   
    // if the style.display value is blank we try to check it out here
    if(div.style.display==''&&div.offsetWidth!=undefined&&div.offsetHeight!=undefined)
    {
        div.style.display = (div.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
    }
   
    // If the PopUp is hidden ('none') then it will display it ('block').
    // If the PopUp is displayed ('block') then it will hide it ('none').
    div.style.display = (div.style.display==''||div.style.display=='block')?'none':'block';
   
    // Off-sets the X position by 15px
    X = X - 5;
    Y = Y - 5;
   
    // Sets the position of the DIV
    div.style.left = X+'px';
    div.style.top = Y+'px';
}

function getHTTPObject() {
  var xhr = false; // Pre-defining the xhr variable
  if (window.XMLHttpRequest) { // Firefox, Safari, Opera and Netscape and IE7 all use this
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // Below IE7 uses this
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP"); // IE 6
    } catch(e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE 5
      } catch(e) {
        xhr = false; // Browser seemingly does not support XHR
      };
    };
  };
  return xhr;
};

Javascript (flyout.js)

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

function ddSlide(c,d){
  var currh = c.offsetHeight;
  var dist;
  if(d == 1){
    dist = Math.round((c.maxh - currh) / DDSPEED);
  }else{
    dist = Math.round(currh / DDSPEED);
  }
  if(dist <= 1 && d == 1){
    dist = 1;
  }
  c.style.height = currh + (dist * d) + 'px';
  c.style.opacity = currh / c.maxh;
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  if(currh > (c.maxh - 2) && d == 1){
    clearInterval(c.timer);
  }else if(dist < 1 && d != 1){
    clearInterval(c.timer);
    c.style.display = 'none';
  }
}

Kan evt. uploade siden til nettet, senere på dagen. :)

En onlne udgave af det kan ses her: http://dadr.dk/test/

Lukker :)