Solved

Jquery Mobile Menu(s) Overlap

Posted on 2013-01-02
1
1,075 Views
Last Modified: 2013-01-03
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
Comment
Question by:danfiggolf
1 Comment
 
LVL 1

Accepted Solution

by:
miraj21285 earned 500 total points
ID: 38739676
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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question