Most of the developers feel pain when it comes to IE6. Actually it is a positive result for a developer to handle IE6 related issues through either CSS or Javascript or any server side language.

Here we will focus on ‘offsetTop‘ – a Javascript method for positioning the element on a web page. It could be used for menus or showing some contents in a DIV (ie. block level element). So for that you can use

document.getElementById(id).style.top = element.offsetTop;

The above single line javascript code works fine in Firefox, Safari and in Chrome. But the javascript ‘offsetTop’ method does not support in IE6 directly. It will show up the position of the element at the top but not relative to the parent element. To overcome this there is another method called ‘parentNode‘ in javascript. What it does? It first checks the position of the parent element and then assign the position to the element in a pixel which we want to show on ‘onmouseover’ or ‘onclick’ event.

Here is a simple javascript function you will need to call:

function showSubElement(id){
  var msie = 'Microsoft Internet Explorer';
  var elementToShow = document.getElementById('elementID');
  var elementOnShow = document.getElementById(id);
  if (navigator.appName == msie){
    elementToShow.style.top = elementOnShow.parentNode.offsetTop  +  'px';
  }else{
    elementToShow.style.top = elementOnShow.offsetTop;
  }
  // To use ternary operators instead if-else, remove the if-else condition and un-comment following line.
  // elementToShow.style.top = (elementOnShow.offsetTop) + (navigator.appName == msie ? elementOnShow.parentNode.offsetTop : 'px');
}

Now call this function on anchor:

<a href="javascript:;" id="a1" onmouseover="showSubElement('a1')">
  Show contents on Mouseover
</a>