jQuery UI overlapping/masking MvcSiteMap menu

Question

Please see the images below. jQuery UI controls are overlapping/masking MvcSitemap drop down. I believe this is a quick fix (changing a css property of UI theme or so) but I'm having hard time finding how to override this behavior of UI controls. Hope someone will help resolve this issue.

1. UI Buttons overlapping the menu

2. Tab control overlapping the menu

Thanks in advance.

Answer 1

Add a high z-index css style to the MvcSitemap dropdowns css. Something like z-index: 1000; would be a reasonable start.

The jQUery UI controls are not intentionally going over anything, instead the menu is being rendered underneath the things below it. This is because its html comes before the other widgets in the document layout.