Further more I have set it to 100% so that the menu looks slightly transparent like an Android app. This same menu structure works fine else where in the app except the page with Google maps on it.
When on the maps page I am unable to select any of the menu buttons in the nav bar and there for navigate away.... my footer still works.
I did think it was some thing to do with Google taking over the screen so I have even tried changing the z-index of the divs with no luck.
The reason for this thinking was that moving the mouse over the menu shows ( using Chrome ) the correct link but for what ever reason the actual touch / click event is not be captured and actioned as a result.
I'd appreciate any thoughts you may have on the problem.
EDIT For reference I am using jquery-1.8.2 & jquery.mobile-1.2.0