<div>s to float/overlay above other elements in css

Question

This question refers to my web-page at this address: http://www.acehscmaths.com/welcome/testhome

When you click on the "charts" menu option (next to the logo right at the top), it pulls down more menu options, this then causes the whole page to be pushed downwards. Is there anyone I can apply a CSS setting to these drop-down elements so that they overlay above the existing content (so as not to push the whole page down).

I'm not sure which bits of code I should copy, so I have just copied the particular menu in question:

<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>

Thanks so much in advance.

Answer 1

Adding the following adjustments in your css should fix the issue and maintain the fluid layout of your page.

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

It may need a little adjustment but should sort the issue.

Answer 2

To side-bar-wrapper .side-menu > li > ul (your ul under li with class active) add

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

You can chose smaller z-index. I set width to 350px becouse it seemed to be about the same, but you should set it your way.