JQuery Mobile раскрывающееся меню в заголовке не будет работать - PullRequest
Новая
       0

JQuery Mobile раскрывающееся меню в заголовке не будет работать

0 голосов
/ 30 сентября 2011

Я создал собственное выпадающее меню в заголовке на мобильной странице 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>
...

Проблема в том, что в раскрывающихся меню css установлено положение: absolute, а для родительского li установлено значениеположение относительно нормальное.Проблема сейчас в том, что li не будет отображаться сверху, а вместо этого появится под div с data-role = "content".Итак, мой вопрос: как я могу заставить подменю появляться поверх всех остальных 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;
}

1 Ответ

0 голосов
/ 30 сентября 2011

Вам нужно установить позицию, даже если вы используете position: absolute. 

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