Can someone help me in resolving this issue?
There are 100s of product categories on this website. As per requirement, I have to list most of them in the header as a dropdown menu. On the large pages, there is no issue as all of the menu items are visible. But on small pages e.g. Contact Page, large submenu items are hidden behind the footer. Same can be seen in the screenshot:
I have already tried high z-index value (z-index: 1000000;) but still unable to fix this issue.
This can happen if the parent element has overflow:hidden property. Then z-index has no effect. Try removing overflow property from your parent element.