在android浏览器中，Javascript菜单向左移动，并暴露屏幕右侧的间隙

当我的网站在移动设备上查看时，我有一个非常基本的菜单。它在所有浏览器中的功能都完全符合预期。就像我说的，它在所有浏览器中都能运行。它打开和关闭潜水器。问题是，在默认的Android浏览器中，当你第一次打开菜单时，它会向左移动，并在菜单右侧露出一个很大的间隙。这就像菜单的宽度在缩小。如果我关闭并重新打开菜单，菜单将有100%的宽度，就像它应该有的那样。它在Firefox Android浏览器中不能做到这一点。只是默认的浏览器。除了宽度更小之外，其他一切都很好

菜单有时经常挂在某种程度上。当您关闭与切换关联的菜单容器时，容器内的内容将"挂起"在屏幕上。"屏幕上留下了一些div。这可能与slideToggle有关吗？如果我简单地使用Toggle，它会消失吗？

这是我的js

        $(document).ready(function(){
                $("#mobilemenu").hide();
                $("#mobilemenu-drop").show();
            $('#mobilemenu-drop').click(function(){
            $("#mobilemenu").slideToggle();
            return false;
            });
        });
        $(document).ready(function(){
                $("#cats").hide();
                $(".show_cats").show();
            $('#mobilemenu-catdrop').click(function(){
            $("#cats").slideToggle();
            return false;
            });
        });

这是我的html

    <header>
        <h1>title</h1>
    <span class="right">
        <div id="mobilemenu-drop">
            click
        </div>
    </span>
</header>
<div id="mobilemenu">
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>
    <div id="mobilemenu-catdrop">
        <span>Second drop</span>
    </div>
    <div id="cats">cats
        drop content
    </div>
</div>

菜单内容的css是这个

#mobilemenu {
    width: 100%;
    background: #2e97de;
    border-top: #8dc8f2 1px solid;
}]