Hi
I am trying to create a dynamic header such that:
- User mouse overs a navigation header item and a div is overlayed underneath the navigation bar containing 3 columns of links for that particurlar section.
- This div also contains a 4th column that consists of a parsys component.
- Author can drag and drop components onto that parsys.
However, due to the nature of the header overlay, (mouseenter and mouseleave JQuery events trigger the overlay to show or hide), when I hover over the parsys (inside the overlay) a mouseleave event is triggered on the container div and the header closes.
This seems to be because the parsys is contained in a separate div at the bottom of the page with id CQ and is dynamically positioned in place. This means when I mouse over the parsys, I am mousing out of the header.
Is anyone aware of a method to do this, or an example of where something similar has been done before?
Thanks in advance