Question

所以我仍然是整个css和div的新手，请原谅我糟糕的编码。：/无论如何，我已经完成了一个网站，但奇怪的是侧面导航栏没有出现在Chrome和默认的Android浏览器等移动浏览器上。任何想法为什么？感谢所有帮助。

另外，我已经通过Chrome，FF和Opera在我的桌面上进行了测试，它似乎工作正常，但另一位使用Chrome的用户表示他没有看到它？

Answer 1

是的，这是因为：＃menu {position：absolute;}

因为位置是绝对的，并且主要内容是居中的，所以当您进入小屏幕尺寸时，菜单会落后于内容。您可以通过调整屏幕大小来实验这一点。

要快速修复，请移除位置：绝对，这将解决您的问题，但这是我的建议：

从＃menu和#container中删除绝对位置和相对位置。从右边和左边删除边距：从#container自动，然后浮动#container left（float：left;）。最后，将自动左右边距应用于#site（您需要首先指定宽度，看起来像920px应该工作）。 #menu将保留在#container旁边，两者都将以页面为中心。

为了更好的衡量，我会在网站上方添加100％高度和宽度div（#wrapper）。

另外，请注意，如果你把“position：absolute;”在任何事情上，它都从元素的“流”中移除，因此边距不会影响它。这是一篇很棒的文章，帮助我找到了位置：http://www.barelyfitz.com/screencast/html-training/css/positioning/

欢迎使用CSS！这很有趣，有时甚至会加剧。我希望你喜欢。

Answer 2

尝试使用％而不是固定宽度。发生的事情是在较小的屏幕上，菜单被您的内容块覆盖，因为该块对于屏幕而言是大的。要查看我的意思，请使用智能手机打开网站，然后调整容器的大小。刷新后，您将看到菜单。我在这台笔记本电脑上安装了firefox，菜单也没有显示给我。

Answer 3

你应该尝试将菜单div添加到容器并删除绝对位置。我看到太多div，所以尝试使用较少的div。为什么你需要那个cssmenu div？

    <div id="container">
    <div id="menu">
    <div id="cssmenu">
    </div>
    </div>
    <div class="insta">
    </div>
      rest of content
    </div> end container

                .insta {
                color: #333333;
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                -webkit-border-radius: 7px;
                -moz-border-radius: 7px;
                border-radius: 7px;
                -moz-box-shadow: 0 0 10px 0 #000;
                -webkit-box-shadow: 0 0 10px 0 #000;
                box-shadow: 0 0 10px 0 #000;
                background: #EDEDED;
                float:right;
                width:770px;
                }
                #container {
                overflow: auto;
                height: auto;
                width:920px;
                                    margin:0 auto;
                }
            #menu {
            float: left;
            margin-top: 25px;
            }

希望这个答案有所帮助。

Side Nav Bar没有在手机中显示？

3 个答案: