Не могу сделать сайдбар с выпадающим меню, которое смещало бы контент

[Vo.Wonder]

Здравствуйте. Помогите разобраться, как сделать сайдбар с выпадающим меню. Сейчас всё обстоит так:

1. По нажатию на волшебную кнопку появляется скрытый ранее bootstrap-столбец, при этом с помощью JQuery я переопределяю классы для элементов, которые расположены справа от сайдбара, элементы перестраиваются и сдвигаются (картинка №1 - сайдбар не отображается, картинка №2 - сайдбар отображается и элементы смещены):

Картинка 1 и Картинка 2

2. При нажатии на какой-либо из пунктов (например, Blog) появляется ещё один bootstrap-столбец, который тоже был скрыт. Элементы смещаются ещё правее (картинка №3).

При этом мой убогий код выглядит примерно так:

                <div class="col-lg-3 main-menu no-padding">
                    <div class="menu-container">
                        <ul>
                            <li><a href="">Home</a></li>
                            <li><a href="">Store</a></li>
                            <li class="blog">
                                Blog
                            </li>
                            <li><a href="">Community</a></li>
                            <li><a href="">Contest</a></li>
                            <li><a href="">About</a></li>
                            <li><a href="">Content</a></li>
                        </ul>
                    </div>
                    <div class="contact-container"></div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 sub-menu">
                    submenu
                </div>

Как видите, элемент, который содержит подменю, находится вне основного списка элементов меню, что, конечно же, неправильно. Помогите, пожалуйста, разобраться, как сделать так, чтобы всё было семантически верно и подменю было внутри списка основного меню.

Спасибо.

Edited May 23, 2016 by Vo.Wonder