我想在导航栏上添加下拉菜单。问题是元素总是向左浮动而不是向右浮动,并且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文件的链接

Jsfiddle

最佳答案

在CSS中,#menu-right可以使用

right:0;


代替

float: right !important;


绝对定位和浮动不能同时使用。

修复CSS:


    data-role =“ listview” data-inset =“ true”
给你的ul“菜单右”。

09-12 01:39
查看更多