• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1210
  • Last Modified:

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>

Open 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;
}

Open in new window

0
danfiggolf
Asked:
danfiggolf
1 Solution
 
miraj21285Commented:
This is a fairly simple solution
you have a typo

<div data-role="collapsible" data-mini="true" data-theme="b" data-content-theme="c" style="z-index=999; position: absolute; right: 2px;"

Open in new window


change the following from
z-index=999;

Open in new window

to
z-index: 999;

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now