Search code examples
jquerycssmuse

Dynamic horizontal menu overlays content when hidden

I have a client who built a website using an Adobe Muse template. They asked me to create a form to use on their page. Now they have an issue where the dynamic horizontal menu overlays the form/content below it, even when the submenu is hidden, so the inputs under the submenu footprint cannot be selected/changed.

When the main menu is hovered, the submenu is shown- enter image description here

but when the submenu is hidden, the footprint of that element is still there enter image description here
So any inputs in the blue cannot be selected/changed. If they scroll up, so that the elements are below the blue area, then they can be selected/changed.

CSS is my weak point, so I am not sure what I am looking for to change to condense the submenu footprint when hidden. Using chrome developer tools I found if I uncheck z-index: 192 or position: fixed

enter image description here
then the issue goes away, but the main menu also disappears.

I need help knowing what properties I need to change. The live site is located at http://utahdancefilmfestival.org/festival.html#submissions

Not knowing the Adobe Muse products, is it possible that this menu/css is generated by jQuery, and that is where I need to be looking?

Solution

  • One thing I noticed is that the overlaying box is not really a submenu footprint. It's actually always there, even when the nav menu hasn't been hovered.

    enter image description here

    It seems like it has an excessively tall height. So I adjusted the height...

    #u11447 { height: 100px; }

    ... and got this:

    enter image description here

    With that height adjustment the mouse is able to access everything on the page.