0

我想在导航栏上制作下拉菜单。问题是元素总是向左浮动而不是向右浮动，而且 li 元素的 css 也丢失了。我错过了一些东西。任何人都可以建议帮助提前谢谢。

标题 html

<div data-role="header" data-theme="b" id="header">
<div data-role="navbar" data-iconpos="bottom" class="nav-custom">
    <ul>
        <li>
            <a href="#" class="back" data-rel="back" data-transition="fade" data-theme="" data-icon="back">
                Back
            </a>
        </li>

        <li>
            <a href="#" id="bars" data-icon="custom" data-iconpos="notext" data-iconshadow="false">&nbsp;</a>
        </li>

    </ul>
         </div>
        <ul id="menu-right">
            <li data-icon="false"><a href="#a1">Option B1</a></li>
            <li data-icon="false"><a href="#a1">Option B2</a></li>
        </ul> 

</div>

javascript

     var windowWidth = (parseInt($(window).width())/2);
    $('#menu-right').css({'width': windowWidth});
    $('#bars').bind('click', function(event) {
        event.preventDefault();
        $("#menu-right").toggle();

    });

css

    #header #menu-right{        
    display: none; /* Hide */
    z-index:500; /* Ensure visibility over other elements on page */
    margin-top: 0px; /* Bring menu closer to button; not needed on mobile */
}
#header #menu-right li{

    display: block; /* JQM makes a inline-blocks... reset it to block */
}
#header  ul li a{
    white-space: normal; /* Stop long menu names from truncating */
}
#menu-right{
    position: absolute;
    float: right !important;
    margin-right:0.5em; 
}

这是js文件的链接

提琴手

4

2 回答 2

2

在#menu-right 的 CSS 中，使用

right:0;

代替

float: right !important;

绝对定位和浮动不能一起工作。

要修复 CSS：

将 data-role="listview" data-inset="true" 添加到名为“menu-right”的 ul 中。

于 2013-05-27T11:51:18.710 回答
1

我认为您应该将#menu-right 移到that plus li 中。

<li>
    <a href="#" id="bars" data-icon="custom" data-iconpos="notext" data-iconshadow="false">&nbsp;</a>
    <ul id="menu-right">
        <li data-icon="false"><a href="#a1">Option B1</a></li>
        <li data-icon="false"><a href="#a1">Option B2</a></li>
    </ul> 
</li>

并更改CSS

#menu-right{
    margin:0;
    padding: 0;
}
于 2013-05-27T12:07:58.743 回答