Question

此问题涉及我在此地址的网页：http://www.acehscmaths.com/welcome/testhome

当您点击“图表”菜单选项（位于顶部的徽标旁边）时，它会下拉更多菜单选项，这会导致整个页面向下推。是否有人可以将CSS设置应用于这些下拉元素，以便它们覆盖在现有内容之上（以便不会将整个页面向下推）。

我不确定我应该复制哪些代码，所以我刚刚复制了有问题的特定菜单：

<div class="col-md-3">
    <div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">

        <ul class="side-menu">
            <li>
                <a href="charts.html" class="is-dropdown-menu">
                    <span class="badge pull-right"></span>
                    <i class="icon-bar-chart"></i> Charts
                </a>
                <ul>
                    <li>
                        <a href="charts.html#area_chart_anchor">
                            <i class="icon-random"></i>
                            Area Chart
                        </a>
                    </li>
                    <li>
                        <a href="charts.html#circle_chart_anchor">
                            <i class="icon-bullseye"></i>
                            Circular Chart
                        </a>
                    </li>
                    <li>
                        <a href="charts.html#bar_chart_anchor">
                            <i class="icon-signal"></i>
                            Bar Chart
                        </a>
                    </li>
                    <li>
                        <a href="charts.html#line_chart_anchor">
                            <i class="icon-bar-chart"></i>
                            Line Chart
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
</div>

<div class="col-md-3">
    <div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">

        <ul class="side-menu">
            <li>
                <a href="newquestion">
                    <i class="icon-question"></i> Question
                </a>
            </li>
        </ul>

    </div>
</div>


<div class="col-md-3">
    <div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">

        <ul class="side-menu">
            <li>
                <a href="newnotes">
                    <i class="icon-book"></i> Study Notes
                </a>
            </li>
        </ul>

    </div>
</div>

非常感谢。

Answer 1

在css中添加以下调整应该可以解决问题并保持页面的流畅布局。

.side-menu {
   position:relative;
}
.side-menu li ul {
  position:absolute;
  z-index:99;
  width:100%;
}

可能需要稍加调整，但应对问题进行排序。

Answer 2

side-bar-wrapper .side-menu＆gt; li> ul （您的 ul 在 li 下，类激活）添加

position: absolute;
z-index: 100;
width: 350px;

您可以选择较小的z-index。我将宽度设置为350px，因为它似乎差不多，但你应该按照自己的方式设置它。

Answer 3

隐藏部分：

position: absolute;
z-index: 123;
width: 293px;
box-shadow: 0px 10px 30px #000; /*for extra snazzy looks*/

你需要z-index，因为你的页面上似乎有其他东西使用绝对定位。

<div> s浮动/覆盖在css </div>中的其他元素之上

3 个答案: