Подменю выпадающего меню внутри div не выровнено после прокрутки

Question

У меня есть сценарий, когда у меня есть несколько выпадающих меню для каждого клиента в таблице, и эта таблица находится внутри прокручиваемого div. По умолчанию видны только верхние 3 Клиента. Когда вы нажимаете кнопку «Действие» на любом клиенте, она подпадает под подменю только под кнопкой «Действие».

У меня возникают проблемы, если я прокручиваю div, а затем, если я нажму кнопку «Действие» против 4-го, 5-го или 6-го Клиентов, он оставляет промежуток между кнопкой «Действие» и подменю.

 <ul class="actionMenu" id="centralObjUL" > 
     <li class="actionMenuLi" id="liAction" onclick="displaySubMenu(this)" > 
      <a class="actionMenuLink" onkeydown="keydown('','Link1')" onblur="liOnblur(this.parentNode)" href="javascript:void(0);">Actions&nbsp;&nbsp;&nbsp;</a> 
      <ul class="actionSubMenu" id="subMenu" style="display: none;"> 
      <li class="actionSubMenuLi"> 
       <a class="actionSubMenuLink" id="Link1" onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link1','Link2')" onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 1</a> 
      </li> 
      <li class="actionSubMenuLi"> 
       <a class="actionSubMenuLink" id="Link2" onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link1','Link3')" onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 2</a> 
      </li> 
      <li class="actionSubMenuLi"> 
       <a class="actionSubMenuLink" id="Link3" onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link2','Link4')" onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 3</a> 
      </li> 
      <li class="actionSubMenuLi"> 
       <a class="actionSubMenuLink" id="Link4" onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link3','PRFS')" onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 4</a> 
      </li> 
      </ul> 
     </li> 
    </ul> 

Вот пример этого вопроса: http://jsfiddle.net/nkumar/M3MhW/

Answer 1

Проблема заключается в том, что подменю позиции абсолюта. Вам нужно переместить подменю вместе с элементом таблицы.

Здесь:

function displaySubMenu(li) { 
    var objSubMenu = li.getElementsByTagName("ul")[0]; 
    //This would move the submenu 
    objSubMenu.style.top=li.getBoundingClientRect().top+25+"px"; 
    objSubMenu.style.display = (objSubMenu.style.display == "block" ? "none" : "block"); 
} 

Надежда, что помогает.