Solved

Jquery Mobile Menu(s) Overlap

Posted on 2013-01-02
1
1,065 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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

705 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now