Left sidebar on bootstrap?

Question

css

Hello. Tell me please.
I'm just at the beginning of my creative journey. I would like to know how to make a left sidebar like on a toaster for example?
I'm doing something wrong...
Here's the code I have.

<div class="row">
<!--Услуги -->
<div class="col-md-2" id="left-sidebar">
<h3>Специализация</h3>
<ul class="tt-menu">
  <li class="level-item">
    <a href="#">Аэросъемка</a>
    <ul style="display: none;">
      <li class=""><a href="#">Проф.съемка</a></li>
      <li class="level-item">
        <a href="#">Репортажная съемка</a></li>
  <li class=""><a href="#">Презентационная</a>
          </li>	
      
    </ul>
  </li>
  <li class="level-item">
    <a href="#">Инспектирование</a>
    <ul style="display: none;">
      <li class=""><a href="#">Высотных зданий</a></li>
      <li class="level-item">
        <a href="#">Линейных объектов</a></li>
  <li class=""><a href="#">Площадных объектов</a>
          </li>
          
      
    </ul>
  </li>
<li class="level-item">
  <a href="#">Мониторинг</a>
    <ul style="display: none;">
      <li class=""><a href="#">Охрана природы</a></li>
      <li class="level-item">
        <a href="#">Строительства, водных сетей</a></li>
  <li class=""><a href="#">Протяженных объектов</a>
          </li>	
      
    </ul>
  </li>
<li class="level-item">
  </li><li class="level-item active"><a href="#">Безопасность</a>
<ul style="display: block; opacity: 0;">
  <li class="level-item">
</li><li><a href="#">Охрана территорий/режимных объектов</a></li>
<li><a href="#">Визуальное наблюдение<br>лесных угодий,заповедников</a></li>

</ul>
</li>
<li class="level-item">
  </li><li class="level-item"><a href="#">Тепловизионное обеспечение</a>
<ul style="display: none;">
  <li class="level-item">
</li><li><a href="#">Промышленных объектов, высотных сооружений<br>ЛЭП, кровля и фасады</a></li>

</ul>
</li>
<li class="level-item">
  </li><li class="level-item"><a href="#">Промышленные решения</a>
<ul style="display: none;">
  <li class="level-item">
</li><li><a href="#">Аэрофотосъемка территорий и объектов</a></li>
<li><a href="#">Сельскохозяйственное инфраструктурирование</a></li>
<li><a href="#">Кадастровое межевание</a></li>
<li><a href="#">Ортофотопланы, 3D-моделирование</a></li>

</ul>
</li>
<li class="level-item">
  </li><li class="level-item"><a href="#">Содействие</a>
<ul style="display: none;">
  <li class="level-item">
</li><li><a href="#">Полиция,МЧС,ГИБДД, спец.службы</a>
</li>
</ul>
</li>
<li class="level-item">
  </li><li class=""><a href="#">Сотрудничество</a>
</li>
<li class="level-item">
  </li><li class=""><a href="#">Авиационные работы с оборудованием заказчика</a>
</li>
<li class="level-item">
  </li><li class="level-item"><a href="#">Территориальные работы</a>
<ul style="display: none;">
  <li class="level-item">
</li><li><a href="#">Выезд к заказчику по всей России</a></li>
<li><a href="#">Выезд к заказчику за территорию России</a></li>

</ul>
</li>
<li class="level-item">
  </li><li class="level-item"><a href="#">Ваше оборудование. КИП в воздухе</a>
<ul style="display: none;">
  <li class="level-item">
</li><li><a href="#">Радиационный контроль</a></li>
<li><a href="#">Авиационные Ультрафиолетовые Камеры</a></li>


</ul>
</li>
</ul></div>
<div class="col-md-10">
<h3 class="sev">Элементы для услуг</h3>
</div>
<!--Конец Услуги -->
<div class="row">
<div class="col-md-12" id="reccomend">
<h3 class="recomend">Нам доверяют</h3>
</div>
</div>
<div class="row">
<div class="col-md-12" id="otziv">
<h3 class="sev2">Отзывы</h3>
</div>
</div>

Here is such a kaka ...
Please help me to do it right :-)
And in this menu, when hovering, lists drop out. By the way, for some reason it turns out to be non-adaptive (I use a js script so that the menu and css drop out.
If someone tells me on the first or second question, I would be grateful.

Answer 1

getbootstrap.com/examples/dashboard