Jquery Mobile Menu(s) Overlap

I have an overlap issue with two menus.  The menu in the header with this code -

<div data-role="collapsible" data-mini="true" data-theme="b" data-content-theme="c" style="z-index=999; position: absolute; right: 2px;">
    <h2>Menu</h2>
    <ul data-role="listview">
        <li><a href="index.html">Posh</a></li>
        <li><a href="index.html">Scary</a></li>
        <li><a href="index.html">Sporty</a></li>
        <li><a href="index.html">Baby</a></li>
        <li><a href="index.html">Ginger</a></li>
    </ul>
</div>

Select allOpen in new window

When clicked on slides behind the menu button - Sample Page at website - http://test2.dfigdesign.com.  

I'm not sure how to apply z-index to allow the top menu drop over the Sample Page button?

If I add z-index -9999  to the access ul below, the drop down menu will display over the Menu item (Sample Page), but the Sample Menu is lost:

#access ul {
    font-size: 13px;
    list-style: none outside none;
    margin: 0; 
    padding-left: 0;
    z-index: -9999;
}

Select allOpen in new window