Javascript dropdown

Question

I did a dropdown using JavaScript where on mouseover the dropdown opens. Now since i am using it in a side menu, i would like that when i go over the dropdown, instead of the dropdown items get over the items underneath, i would like that the items underneath move lower to make space.

I managed to achieve this by removing the overflow in the CSS however the problem with this is that when i enter the web page, the dropdown is fully expanded until i go over it with the mouse.

Answer 1

Leave the overflow:hidden in the CSS.

Add to the element style.overflow = "visible" when you want the menu to appear and use style.overflow = "hidden" or style.overflow="" on the element when you want it hidden again.

Answer 2

You need to get/calculate the hight of dropdown layer (supposing this is in different layer) and add this height to underlying menu item box element (checking whether dropdown is visible or not, of course).