jQuery Mobile dropdown menu in header wont work

I have made my own dropdown menu in the header on a jQuery mobile page:

<div data-role="header">                
<ul id="menu">
    <li><a href="#" data-role="button" data-icon="gear" data-rel="dialog">Menu</a>
        <ul>
            <li><a href="">Forgot to accept</a></li>
            <li><a href="">Remove me from group</a></li>
        </ul>
    </li>
</ul>
<h1><?php echo $group_data['name']; ?></h1>
...

The problem is now that the drop menus css is set to position: absolute and the parent li is set to position relative as normal. The problem now is that the li won't appear on top, but instead appears under the div with data-role="content". So my quisti开发者_运维技巧on is how i can force the submenu to appear on top of all other div/layers (what you know call them)?

The css for my menu:

#menu {
    list-style: none;
    padding: 0;
    margin: 3px 0 0 5px; /* To make the menu button appear propper in the header */
}

#menu li {
    float: left;
    position: relative;
}

#menu ul {
    position: absolute;
    display: none;
    list-style: none;
    color: #949494;
    padding: 0;
    margin: 3px 0 0 0;
}
#menu ul li{
    line-height: 50%;
    float: none;
}
#menu ul a{
    color: #0291ff;
    text-decoration: none;
    font-size: 12px;
    line-height: 150%;
}
#menu ul a:Hover{
    color: #000;
}

---

You need to set the position even though you're using position: absolute.

#menu ul {
    position: absolute;
    top: 0;
    left: 0;
    ...
}