Question

我在jQuery移动页面的标题中创建了自己的下拉菜单：

<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>
...

问题是现在drop menu css设置为position：absolute，而parent li设置为相对正常位置。现在的问题是li不会出现在顶部，而是出现在带有data-role =“content”的div下面。所以我的问题是如何强制子菜单出现在所有其他div /层之上（你知道怎么称呼它们）？

我菜单的CSS：

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

Answer 1

即使您使用的是position: absolute，也需要设置位置。

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

标题中的jQuery Mobile下拉菜单不起作用

1 个答案: