Search the Community

Здравствуйте. Помогите разобраться, как сделать сайдбар с выпадающим меню. Сейчас всё обстоит так: 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> Как видите, элемент, который содержит подменю, находится вне основного списка элементов меню, что, конечно же, неправильно. Помогите, пожалуйста, разобраться, как сделать так, чтобы всё было семантически верно и подменю было внутри списка основного меню. Спасибо.