Touch hitting button under html element

Question

I have the following html and css set up in a phonegap app. I am having an issue where when the "Pay Now" button is covered by the navigation links across the bottom of that page and the user tries to touch one of the navigation links the "Pay Now" button is being pressed instead of the navigation link.

Has anyone come across this before, been able to fix it?

Answer 1

I have an hacky way you may try once...

Put a transparent rectangle behind the navigation links you have, so that whenever user will touch these links the event will not land on your "Pay Now" button,

Best of luck ....

Answer 2

Set the menu's z-index value to a higher value in the page, precisely in (div#menu ul) rule